CopyCode The Code is as follows: <HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<SCRIPT type = "text/JavaScript" src = "jquery-1.3.2.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "jquery-ui-1.7.2.custom.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
// ============================================
// Dragg and drop sample program
// Authored by gujinsong @ trans-Cosmos
//
// ============================================
// Temporary var that stored selected rows
VaR selectedrows = [];
// Forbid all select
Document. onselectstart = function () {return false ;}
// Fires when dragg object go out the source table
$ (Document). mouseup (function (){
$ (". Float"). Hide ();
$ (". Float") [0]. innerhtml = "";
Isdragging = false;
}
). Mousemove (function (e ){
If (isdragging = true ){
$ (". Float" ).css ("TOP", E. clienty + 2 );
$ (". Float" ).css ("Left", E. clientx + 2 );
$ (". Float"). Show ();
}
});
// Flag that indicates whether is during dragging
VaR isdragging = false;
// Using jquery give mouse event to each rows
$ (Document). Ready (function (){
$ (". Stripe TR"). mousedown (
Function (e ){
If (this. innerhtml. substring (0, 3) = "<TH") return false;
If (! E) var E = Window. event;
If (! E. ctrlkey ){
Unselectall ();
}
If ($ (this). Context. classname = "over "){
$ (This). removeclass ("over ");
Unselect ();
}
Else {
$ (This). addclass ("over ");
Selectedrows. Push ($ (this ));
// Set Style
$ (". Float" ).css ("TOP", E. clienty + 5 );
$ (". Float" ).css ("Left", E. clientx + 5 );
$ (". Float" ).css ("zindex", 1 );
$ (". Float" ).css ("position", "absolute ");
$ (". Float"). Width ($ (this). Width ());
$ (". Float"). Height ($ (this). Height () * selectedrows. Length );
For (VAR I = 0; I <selectedrows. length; I ++ ){
$ (". Float"). append (selectedrows [I]. Clone ());
}
$ (". Float"). wrapinner ("<Table> </table> ");
}
}
). Mouseup (function (){
If (this. innerhtml. substring (0, 3) = "<TH "){
$ (". Float"). fadeout ("normal ");
$ (". Float") [0]. innerhtml = "";
Isdragging = false;
};
If ($ (this). Context. classname! = "Over" & isdragging = 1 ){
Draggstop ($ (this ));
}
}). Mousemove (function (e ){
If (this. innerhtml. substring (0, 3) = "<TH") return false;
If (E. Button = 1 ){
Isdragging = true;
$ (". Float" ).css ("TOP", E. clienty + 2 );
$ (". Float" ).css ("Left", E. clientx + 2 );
$ (". Float"). fadein ("normal"); // show ();
}
})
});
// Function that re-Sort rows
Function draggstop (item ){
$ (". Stripe TR"). Each (function (){
If (this. classname = "over "){
$ (This). insertbefore (item );
}
});
}
// Clear all selected rows
Function unselectall (){
For (VAR I = selectedrows. Length-1; I>-1; I --)
{
Selectedrows [I]. removeclass ("over ");
Selectedrows. Pop (I );
}
}
// Un-select current row
Function unselect (){
For (VAR I = selectedrows. Length-1; I>-1; I --)
{
If (selectedrows [I]. Context. classname! = "Over "){
Selectedrows [I]. removeclass ("over ");
Selectedrows. Pop (I );
}
}
}
// Acceptable control's mouse event
Function dropable (e ){
If (isdragging = true ){
VaR TXT = Document. getelementbyid ("textbox1 ")
TXT. value = "";
$ (". Stripe TR"). Each (function (){
If (this. classname = "over "){
TXT. value = TXT. Value + this. innerhtml + "\ r \ n ";
}
});
}
}
</SCRIPT>
<Style type = "text/CSS">
Th
{
Background: # 0066ff;
Color: # ffffff;
Line-Height: 20px;
Height: 30px;
}
TD
{
Padding: 6px 11px;
Border-bottom: 1px solid #95bce2;
Vertical-align: top;
Text-align: center;
}
TD *
{
Padding: 6px 11px;
}
Tr. Alt TD
{
Background: # ecf6fc;/* This line adds the background color to all tr */
}
Tr. Over TD
{
Background: # bcd4ec;/* this will be the background color of the highlighted line of the mouse */
}
</Style>
</Head>
<Body>
<Div class = "float">
</Div>
<Form ID = "form1" runat = "server">
<Asp: gridview id = "selectable" runat = "server" class = "stripe">
</ASP: gridview>
<Asp: textbox id = "textbox1" runat = "server" onmouseover = "dropable ();"
Height = "210px" textmode = "multiline" width = "772px"> </ASP: textbox>
</Form>
</Body>
</Html>
