学习JQuery时，发现JQuery只能做单行拖放， 于是花时间做了一个多行拖放的例子， 以备以后使用。
<html xmlns="">
<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 //2009-11-11 //=================================== //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; /*这行将给所有的tr加上背景色*/ } tr.over td { background: #bcd4ec; /*这个将是鼠标高亮行的背景色*/ }</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" οnmοuseοver="Dropable();" Height="210px" TextMode="MultiLine" Width="772px" ></asp:TextBox> </form></body></html>