<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
2009-11-11
//===================================
Temporary var that stored selected rows
var selectedrows = [];
Forbid all Select
Document.onselectstart = function () {return false;}
Fires when Dragg object to 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 will give all TR plus background color * *
}
Tr.over TD
{
Background: #bcd4ec; * * This will be the background color of mouse Gaoliang * *
}
</style>
<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>
