asp.net jquery Gridview的多行拖放，以及跨控件拖放

2023-07-08 10:41 45次浏览问答

代码如下:
<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
//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></div>
<form><asp:GridView ID=”selectable” runat=”server”></asp:GridView>
<asp:TextBox ID=”TextBox1″ runat=”server” onmouseover=”Dropable();”
Height=”210px” TextMode=”MultiLine” Width=”772px” ></asp:TextBox>
</form>
</body>
</html>
。

1.文章《asp.net jquery Gridview的多行拖放，以及跨控件拖放》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

2.文章《asp.net jquery Gridview的多行拖放，以及跨控件拖放》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

asp.net jquery Gridview的多行拖放， 以及跨控件拖放

相关推荐

asp.net jquery Gridview的多行拖放，以及跨控件拖放