时间:2016-02-16 02:55 来源: 我爱IT技术网 作者:佚名
欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【asp.net+jquery Gridview的多行拖放， 以及跨控件拖放】，下面是详细的讲解！
asp.net+jquery Gridview的多行拖放， 以及跨控件拖放
<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.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" onmouseover="Dropable();"
Height="210px" TextMode="MultiLine" Width="772px" ></asp:TextBox>
</form>
</body>
</html>
关于asp.net+jquery Gridview的多行拖放， 以及跨控件拖放的用户互动如下：
相关问题：
答： >>详细
相关问题：
答： >>详细
相关问题：
答： >>详细
- 【asp】asp.net url重写浅谈-net-url重写
- 【DataSet】DataSet、DataTable、DataRow区别详解
- 【asp】asp.net 动态添加多个用户控件-net-动态添
- 【ASP】ASP.NET中内嵌页面代码的一个问题-NET-内
- 【As】Asp.net中的页面乱码的问题-sp--pn-ne-et
- 【增加记录】asp.net中获取新增加记录的ID Access
- 【创建】ASP.NET Web API教程 创建域模型的方法详
- 【Asp】Asp.net 页面调用javascript变量的值-net-
- 【ASP】ASP.NET 5升级后如何删除旧版本的DNX-NET5
- 【404页面】ASP.NET设置404页面返回302HTTP状态码
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-