asp.net+jquery Gridview的多行拖放， 以及跨控件拖放
更新时间：2009年11月13日 21:19:04 作者：
学习JQuery时，发现JQuery只能做单行拖放， 于是花时间做了一个多行拖放的例子， 以备以后使用。
复制代码 代码如下:
<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 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中各种类型的JSON格式化实现代码，需要的朋友可以参考下。2011-12-12
使用正则Regex来移除网页的EnableViewState实现思路及代码
创建好网页时，什么都没有写，但运行时会发现源程序(View Source)，下面一段,此刻，也许你会想起，在网页有一个属性EnableViewState,在某些时候我们并不需要它，接下来将介绍如何移除它,感兴趣的朋友可以了解下啊2013-01-01
这篇文章主要为大家详细介绍了.net下log4net使用方法，以控制台应用程序为例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
平时我们创建Zip文件的时候，要么用现成的软件，要么用第三方的开源库。其实用.net自带的类操作起来也非常方便2012-08-08
下面小编就为大家分享一篇使用Ajax更新ASP.Net MVC项目中的报表对象方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
一个.aspx的页面中，用到了两个用户控件，其中想做的到A控件有一个按钮，点击的时候获取到B控件中的一个textbox的值想必大家会使用findcontrol获取控件吧，而在生成的时候名字是不确定的，那么如何书写呢？接下来为您提供详细的解决方法，感兴趣的朋友可以了解下啊2013-01-01
利用noesis.Javascript开源组件.Net中执行javascript脚本
利用Noesis.Javascript开源组件可以做到在.net中执行js脚本，同时js脚本也能调用C#函数。这个组件的获得方式：在NuGet中输入搜索"Noesis"就能找到,我们来做个搜索功能：用户能够在textbox中输入js脚本来筛选list记录2013-12-12
在.NET中,内存管理主要依赖垃圾回收（GC）,但对于非托管资源如文件句柄、数据库连接等,需要更细粒度的控制,介绍了使用using语句和显式调用Dispose方法两种方式来管理这些资源,避免内存泄漏,感兴趣的朋友跟随小编一起看看吧2024-10-10
radiobutton可以单选，于是想让gridview也可以实现，具体的思路及代码如下，感兴趣的朋友可以参考下2013-08-08
本文的主要内容是讲ASP.NET中GridView输出显示的文件，这是个人项目中的一点小经验，希望能给到有需要帮助的人。2016-08-08
最新评论