jquery table拖拽排序

最新推荐文章于 2023-04-07 17:21:08 发布
最新推荐文章于 2023-04-07 17:21:08 发布
阅读量354 收藏
点赞数
分类专栏： javascript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leafrenchleaf/article/details/84249921
版权
参考http://dragsort.codeplex.com/ 

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.dragsort-0.4.min.js"></script>
</head>
<body>
	<table id="list1" border="1">
		<thead id="gridThead">
				<tr style="cursor: pointer;">
					<td class="listHeadCell">编号</td>
					<td class="listHeadCell">名称</td>
				</tr>
		</thead>
		<tbody id="gridtbody">
	        <tr>
		        <td name="biaozhi">1</td>
		        <td>名称1</td>
	        </tr>   
	        <tr>    
		        <td name="biaozhi">2</td>
		        <td>名称2</td>
	        </tr>   
	        <tr>    
		        <td name="biaozhi">3</td>
		        <td>名称3</td>
	        </tr>   
		    <tr>    
		        <td name="biaozhi">4</td>
		        <td>名称4</td>
	        </tr>
	    </tbody>
    </table>
	<br/>
	<textarea name="listhaoSortOrder" id="listhaoSortOrder" rows=10 cols=100></textarea>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#gridtbody").dragsort({ itemSelector: "tr", dragSelector: "tr", dragBetween: true,dragEnd: saveOrder1, placeHolderTemplate: "<tr></tr>" });
		});
		function saveOrder1() {
		//	var data = $("#gridtbody").map(function() { return $(this).children().html(); }).get();
			var data = $("[name='biaozhi']").map(function() { return $(this).html(); }).get();
			$("#listhaoSortOrder").val(data.join("|"));
		};
	</script>
</body>
</html>



jquery.dragsort-0.4.min.js： 
// jQuery List DragSort v0.4
// Website: http://dragsort.codeplex.com/
// License: http://dragsort.codeplex.com/license

(function($) {

	$.fn.dragsort = function(options) {
		var opts = $.extend({}, $.fn.dragsort.defaults, options);
		var lists = [];
		var list = null, lastPos = null;
		if (this.selector)
			$("head").append("<style type='text/css'>" + (this.selector.split(",").join(" " + opts.dragSelector + ",") + " " + opts.dragSelector) + " { cursor: pointer; }</style>");

		this.each(function(i, cont) {

			if ($(cont).is("table") && $(cont).children().size() == 1 && $(cont).children().is("tbody"))
				cont = $(cont).children().get(0);

			var newList = {
				draggedItem: null,
				placeHolderItem: null,
				pos: null,
				offset: null,
				offsetLimit: null,
				scroll: null,
				container: cont,

				init: function() {
					$(this.container).attr("data-listIdx", i).mousedown(this.grabItem).find(opts.dragSelector).css("cursor", "pointer");
					$(this.container).children(opts.itemSelector).each(function(j) { $(this).attr("data-itemIdx", j); });
				},

				grabItem: function(e) {
					if (e.which != 1 || $(e.target).is(opts.dragSelectorExclude))
						return;

					var elm = e.target;
					while (!$(elm).is("[data-listIdx='" + $(this).attr("data-listIdx") + "'] " + opts.dragSelector)) {
						if (elm == this) return;
						elm = elm.parentNode;
					}

					if (list != null && list.draggedItem != null)
						list.dropItem();

					$(e.target).css("cursor", "move");

					list = lists[$(this).attr("data-listIdx")];
					list.draggedItem = $(elm).closest(opts.itemSelector);
					var mt = parseInt(list.draggedItem.css("marginTop"));
					var ml = parseInt(list.draggedItem.css("marginLeft"));
					list.offset = list.draggedItem.offset();
					list.offset.top = e.pageY - list.offset.top + (isNaN(mt) ? 0 : mt) - 1;
					list.offset.left = e.pageX - list.offset.left + (isNaN(ml) ? 0 : ml) - 1;

					if (!opts.dragBetween) {
						var containerHeight = $(list.container).outerHeight() == 0 ? Math.max(1, Math.round(0.5 + $(list.container).children(opts.itemSelector).size() * list.draggedItem.outerWidth() / $(list.container).outerWidth())) * list.draggedItem.outerHeight() : $(list.container).outerHeight();
						list.offsetLimit = $(list.container).offset();
						list.offsetLimit.right = list.offsetLimit.left + $(list.container).outerWidth() - list.draggedItem.outerWidth();
						list.offsetLimit.bottom = list.offsetLimit.top + containerHeight - list.draggedItem.outerHeight();
					}

					var h = list.draggedItem.height();
					var w = list.draggedItem.width();
					var orig = list.draggedItem.attr("style");
					list.draggedItem.attr("data-origStyle", orig ? orig : "");
					if (opts.itemSelector == "tr") {
						list.draggedItem.children().each(function() { $(this).width($(this).width()); });
						list.placeHolderItem = list.draggedItem.clone().attr("data-placeHolder", true);
						list.draggedItem.after(list.placeHolderItem);
						list.placeHolderItem.children().each(function() { $(this).css({ borderWidth:0, width: $(this).width() + 1, height: $(this).height() + 1 }).html(" "); });
					} else {
						list.draggedItem.after(opts.placeHolderTemplate);
						list.placeHolderItem = list.draggedItem.next().css({ height: h, width: w }).attr("data-placeHolder", true);
					}
					list.draggedItem.css({ position: "absolute", opacity: 0.8, "z-index": 999, height: h, width: w });

					$(lists).each(function(i, l) { l.createDropTargets(); l.buildPositionTable(); });

					list.scroll = { moveX: 0, moveY: 0, maxX: $(document).width() - $(window).width(), maxY: $(document).height() - $(window).height() };
					list.scroll.scrollY = window.setInterval(function() {
						if (opts.scrollContainer != window) {
							$(opts.scrollContainer).scrollTop($(opts.scrollContainer).scrollTop() + list.scroll.moveY);
							return;
						}
						var t = $(opts.scrollContainer).scrollTop();
						if (list.scroll.moveY > 0 && t < list.scroll.maxY || list.scroll.moveY < 0 && t > 0) {
							$(opts.scrollContainer).scrollTop(t + list.scroll.moveY);
							list.draggedItem.css("top", list.draggedItem.offset().top + list.scroll.moveY + 1);
						}
					}, 10);
					list.scroll.scrollX = window.setInterval(function() {
						if (opts.scrollContainer != window) {
							$(opts.scrollContainer).scrollLeft($(opts.scrollContainer).scrollLeft() + list.scroll.moveX);
							return;
						}
						var l = $(opts.scrollContainer).scrollLeft();
						if (list.scroll.moveX > 0 && l < list.scroll.maxX || list.scroll.moveX < 0 && l > 0) {
							$(opts.scrollContainer).scrollLeft(l + list.scroll.moveX);
							list.draggedItem.css("left", list.draggedItem.offset().left + list.scroll.moveX + 1);
						}
					}, 10);

					list.setPos(e.pageX, e.pageY);
					$(document).bind("selectstart", list.stopBubble); //stop ie text selection
					$(document).bind("mousemove", list.swapItems);
					$(document).bind("mouseup", list.dropItem);
					if (opts.scrollContainer != window)
						$(window).bind("DOMMouseScroll mousewheel", list.wheel);
					return false; //stop moz text selection
				},

				setPos: function(x, y) {
					var top = y - this.offset.top;
					var left = x - this.offset.left;

					if (!opts.dragBetween) {
						top = Math.min(this.offsetLimit.bottom, Math.max(top, this.offsetLimit.top));
						left = Math.min(this.offsetLimit.right, Math.max(left, this.offsetLimit.left));
					}

					this.draggedItem.parents().each(function() {
						if ($(this).css("position") != "static" && (!$.browser.mozilla || $(this).css("display") != "table")) {
							var offset = $(this).offset();
							top -= offset.top;
							left -= offset.left;
							return false;
						}
					});

					if (opts.scrollContainer == window) {
						y -= $(window).scrollTop();
						x -= $(window).scrollLeft();
						y = Math.max(0, y - $(window).height() + 5) + Math.min(0, y - 5);
						x = Math.max(0, x - $(window).width() + 5) + Math.min(0, x - 5);
					} else {
						var cont = $(opts.scrollContainer);
						var offset = cont.offset();
						y = Math.max(0, y - cont.height() - offset.top) + Math.min(0, y - offset.top);
						x = Math.max(0, x - cont.width() - offset.left) + Math.min(0, x - offset.left);
					}

					list.scroll.moveX = x == 0 ? 0 : x * opts.scrollSpeed / Math.abs(x);
					list.scroll.moveY = y == 0 ? 0 : y * opts.scrollSpeed / Math.abs(y);

					this.draggedItem.css({ top: top, left: left });
				},

				wheel: function(e) {
					if (($.browser.safari || $.browser.mozilla) && list && opts.scrollContainer != window) {
						var cont = $(opts.scrollContainer);
						var offset = cont.offset();
						if (e.pageX > offset.left && e.pageX < offset.left + cont.width() && e.pageY > offset.top && e.pageY < offset.top + cont.height()) {
							var delta = e.detail ? e.detail * 5 : e.wheelDelta / -2;
							cont.scrollTop(cont.scrollTop() + delta);
							e.preventDefault();
						}
					}
				},

				buildPositionTable: function() {
					var item = this.draggedItem == null ? null : this.draggedItem.get(0);
					var pos = [];
					$(this.container).children(opts.itemSelector).each(function(i, elm) {
						if (elm != item) {
							var loc = $(elm).offset();
							loc.right = loc.left + $(elm).width();
							loc.bottom = loc.top + $(elm).height();
							loc.elm = elm;
							pos.push(loc);
						}
					});
					this.pos = pos;
				},

				dropItem: function() {
					if (list.draggedItem == null)
						return;

					$(list.container).find(opts.dragSelector).css("cursor", "pointer");
					list.placeHolderItem.before(list.draggedItem);

					list.draggedItem.attr("style", list.draggedItem.attr("data-origStyle")).removeAttr("data-origStyle");
					list.placeHolderItem.remove();

					$("[data-dropTarget]").remove();

					window.clearInterval(list.scroll.scrollY);
					window.clearInterval(list.scroll.scrollX);

					var changed = false;
					$(lists).each(function() {
						$(this.container).children(opts.itemSelector).each(function(j) {
							if (parseInt($(this).attr("data-itemIdx")) != j) {
								changed = true;
								$(this).attr("data-itemIdx", j);
							}
						});
					});
					if (changed)
						opts.dragEnd.apply(list.draggedItem);
					list.draggedItem = null;
					$(document).unbind("selectstart", list.stopBubble);
					$(document).unbind("mousemove", list.swapItems);
					$(document).unbind("mouseup", list.dropItem);
					if (opts.scrollContainer != window)
						$(window).unbind("DOMMouseScroll mousewheel", list.wheel);
					return false;
				},

				stopBubble: function() { return false; },

				swapItems: function(e) {
					if (list.draggedItem == null)
						return false;

					list.setPos(e.pageX, e.pageY);

					var ei = list.findPos(e.pageX, e.pageY);
					var nlist = list;
					for (var i = 0; ei == -1 && opts.dragBetween && i < lists.length; i++) {
						ei = lists[i].findPos(e.pageX, e.pageY);
						nlist = lists[i];
					}

					if (ei == -1 || $(nlist.pos[ei].elm).attr("data-placeHolder"))
						return false;

					if (lastPos == null || lastPos.top > list.draggedItem.offset().top || lastPos.left > list.draggedItem.offset().left)
						$(nlist.pos[ei].elm).before(list.placeHolderItem);
					else
						$(nlist.pos[ei].elm).after(list.placeHolderItem);

					$(lists).each(function(i, l) { l.createDropTargets(); l.buildPositionTable(); });
					lastPos = list.draggedItem.offset();
					return false;
				},

				findPos: function(x, y) {
					for (var i = 0; i < this.pos.length; i++) {
						if (this.pos[i].left < x && this.pos[i].right > x && this.pos[i].top < y && this.pos[i].bottom > y)
							return i;
					}
					return -1;
				},

				createDropTargets: function() {
					if (!opts.dragBetween)
						return;

					$(lists).each(function() {
						var ph = $(this.container).find("[data-placeHolder]");
						var dt = $(this.container).find("[data-dropTarget]");
						if (ph.size() > 0 && dt.size() > 0)
							dt.remove();
						else if (ph.size() == 0 && dt.size() == 0)
							$(this.container).append(list.placeHolderItem.clone().removeAttr("data-placeHolder").attr("data-dropTarget", true));
					});
				}
			};

			newList.init();
			lists.push(newList);
		});

		return this;
	};

	$.fn.dragsort.defaults = {
		itemSelector: "li",
		dragSelector: "li",
		dragSelectorExclude: "input, textarea, a[href]",
		dragEnd: function() { },
		dragBetween: false,
		placeHolderTemplate: "<li> </li>",
		scrollContainer: window,
		scrollSpeed: 5
	};

})(jQuery);
linux内核控
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【jQuery】拖曳插件——draggable
O(∩_∩)O
12-22 4773
拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下： $(selector). draggable({options}) options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖
实现table表格可按行拖拽，按列排序，并可以保存排序后的结果
03-26
jquery +jquery.tablesorter+jquery.tablednd_0_5实现table表格可按行拖拽，按列排序，并可以保存排序后的结果
jquery dragsort table实现拖拽排序
weixin_30646315的博客
07-31 756
转自：http://haoningabc.iteye.com/blog/1593640 dragsort官网地址：http://dragsort.codeplex.com/ html代码如下（需引入jquery和dragsort.js）： <html> <head> <script type="tex...
针对后台列表table拖拽比较实用的jquery拖动排序
11-28
现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。 话不多说 ，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js 先上html代码，很简单： 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title> </head> [removed][removed] [removed]</scrip
表格拖拽,表格行拖拽排序,跨表格拖拽
生而为人我很抱歉
04-02 652
由于开发时要时用到表格行拖拽排序功能，但是网上看了很多都不符合我的需求，我需要从一个表格拖动到另外一个表格，下面是我自己写的一个jquery表格拖拽排序插件： tableDrag.js //;(function($){ // $.fn.extend({ // "drag":function(){ // // return this; // } // }); //})($); (fun...
jquery.dragtable.js
10-10
bootstrap-table拖拽需要dragtable.css，jquery.dragtable.js，jquery-ui.js，bootstrap-table-reorder-columns.js
jQuery UI 实例 - 拖动（Draggable）
unber的博客
04-07 2378
允许使用鼠标移动元素。如需了解更多有关 draggable 交互的细节，请查看 API 文档。
bootstrap-table.css 表格拖拽排序
11-28
在这个特定的场景中，`bootstrap-table.css`可能包含了拖拽排序的样式规则，如拖动行时的高亮效果、悬浮指示器等，使得交互过程更加直观。 接着，`jquery.tablednd.js`是基于jQuery的TableDnD库，实现了表格行的...
HTML table鼠标拖拽排序功能
12-30
link rel=stylesheet href=Public/css/jquery-ui.min.css> [removed][removed] 2.给元素附上sortable类 <tr></tr> <tr></tr> </tbody> 3.开启并配置 $(function() { $(.sortable).sortable({
jquery实现的鼠标拖动排序Li或Table
01-19
@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”拖动排序Li或Table.aspx.cs” Inherits=”拖动排序Li或Table” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
dragtable.css
10-10
bootstrap-table拖拽需要dragtable.css，jquery.dragtable.js，jquery-ui.js，bootstrap-table-reorder-columns.js
jquery-draggable总结
weixin_42979149的博客
10-16 7258
约束拖动范围 通过定义 draggable 区域的边界来约束每个 draggable 的运动。 设置 axis 选项来限制 draggable 的路径为 x 轴或者 y 轴 $( "#draggable" ).draggable({ axis: "y" }); $( "#draggable1" ).draggable({ axis: "x" }); 使用 containment 选项来指定...
jquery sortable实现table拖拽排序，更新时只更新受影响的行
热门推荐
山鬼谣的专栏
07-19 2万+
最开始使用时，我是参考这篇文章： http://www.oschina.net/code/snippet_203508_7090 可以点击“全屏查看所有代码”，可以看得更清楚。1、引入：jQuery文件和jquery-ui.js<script src="@{'/public/javascripts/jquery-1.11.1.min.js'}" charset="UTF-8"></script>
一个很好用的JQuery Table拖拽插件
silentime的专栏
04-10 593
  参考地址：http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/   使用很简单： $("#table").tableDnD(); 之后你的table的每一行就能够拖拽了，很cool，当然也有一些选项，事件，具体请看上面的链接。...
el-table——可编辑、拖拽排序与校验的formTableDrag
weixin_30492047的博客
08-29 317
背景： 1.利用form进行校验输入； 2.利用sortable操作Dom替换表格数据顺序； 3.利用lodash实现数据深拷贝与参数替换等 一：最外层的数组校验 <template> <el-form :rules="rules" :model="form" ref="rulesForm"> <el-form-item pro...
Pc端和移动端拖拽组件jquery.drag.js
老白干的zone
02-08 1万+
移动市场开始火爆以来，网页上的拖拽效果则要做到全兼容则不是一件易事，因此最近把研究成果奉上，供大家使用。
JQuery-tableDnD 拖拽的基本使用 Table Drag and Drop JQuery plugin
Just Code
08-22 705
  D is a jQuery plugin that allows you to drag and drop rows within a table for reordering the table data.   Basic Usage: 1. Include jQuery library and TableDnD.js &lt;script type="text/javasc...
最好用的jquery列表拖动排列(由项目提取)
Websites
06-17 3537
最好用的jquery列表拖动排列(由项目提取) 最好用的jquery列表拖动排列自定义拖动层排列 jquery列表模块拖动层，当点击或拖动列表时，可以自定义随意拖放列表模块到相应位置。支持回调函数的拖动层。 代码压缩包下载: http://pan.baidu.com/s/1mgxAIy0
jquery-ui.js 实现对table列的拖拽排序
最新发布
06-06
可以使用jquery-ui.js中的sortable方法来实现对table列的拖拽排序。 首先，需要给table的thead或tbody添加一个class，例如"sortable"，然后使用如下代码初始化sortable方法： ``` $(".sortable").sortable({ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值