脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → ASP.NET → 实用技巧 → asp.net jquery Gridview

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>
您可能感兴趣的文章:

相关文章

  • C#中常用的分页存储过程小结

    C#中常用的分页存储过程小结

    C#中常用的分页存储过程小结，需要利用存储过程分页的朋友可以参考下。
    2010-05-05
  • .NET必知的EventCounters性能指标监视器详解

    .NET必知的EventCounters性能指标监视器详解

    这篇文章主要介绍了.NET必知的EventCounters性能指标监视器,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-11-11
  • ASP.NET Core 3.0轻量级角色API控制授权库

    ASP.NET Core 3.0轻量级角色API控制授权库

    这篇文章介绍了ASP.NET Core 3.0轻量级角色API控制授权库，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-01-01
  • 详解ASP.NET MVC之下拉框绑定四种方式

    详解ASP.NET MVC之下拉框绑定四种方式

    这篇文章主要介绍了详解ASP.NET MVC之下拉框绑定四种方式，详细的讲诉了4种方法，具有一定的参考价值，有需要的可以了解一下。
    2016-12-12
  • asp.net中一个linq分页实现代码

    asp.net中一个linq分页实现代码

    asp.net中一个linq分页实现代码，需要的朋友可以参考下。
    2011-12-12
  • ajaxToolkit:ModalPopupExtender演示及实现代码

    ajaxToolkit:ModalPopupExtender演示及实现代码

    ajaxToolkit:ModalPopupExtender可以让用户模拟新开一个窗口,就是在模拟新开窗口作多项选项的功能,感兴趣的朋友可以了解下，希望此文对你有所帮助
    2013-01-01
  • ASP.NET XmlHttp跨域访问实现代码

    ASP.NET XmlHttp跨域访问实现代码

    最近项目需要实现XmlHttp的POST方法到另一服务器上的页面进行数据的更新，可是IE会提出“该页正在访问其控制范围之外的信息，是否继续?”等警告信息，而在其他浏览器上直接禁止掉，GOOGLE一下原来是XmlHttp的跨域访问问题，找了很多资料，说是提供很多解决方案，可是都没有用处。
    2008-11-11
  • 浅析.net简单工厂模式

    浅析.net简单工厂模式

    这篇文章主要介绍了浅析.net简单工厂模式,需要的朋友可以参考下
    2014-12-12
  • asp.net 生成静态页时的进度条显示

    asp.net 生成静态页时的进度条显示

    本文侧重点在讲解生成静态页的“进度条”，所以将采用模拟的方法。生成静态时需要生成的文章必须非常多，否则进度条可能一闪而过，看不到效果。
    2009-05-05
  • asp.net 购物车的实现浅析

    asp.net 购物车的实现浅析

    我从来没有进行过正式的web开发，但是我一直喜欢web，所以这篇文章也是我转行web的一个开始吧。或多或少我也参考了几个网站的实现（当然了，只是看看大概的功能而已），所以也请大家多多指教。
    2011-02-02

最新评论