table列表实现拖拽移动tr

Table列表中实现拖拽移动tr

今天用户提的一个需求为能够拖拽table中的tr，实现tr的换行，他好临近对比数据。

这种效果
网上搜了很多答案，包括使用jquery的custom包，ui包等实现，发现在我们的系统中并不能实现。最终通过搜索资料发现：
还是用jquery ui的sortable
首先：引入依赖，jquery的ui包请去搜索下载
注意！
jquery.min.js这个一定要放在下面两个依赖的前面

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/static/plugin/jquery-ui/jquery-ui.min.css" />
<script src="${ctx}/static/plugin/jquery-ui/jquery-ui.min.js"></script>

然后就是JS代码

var fixHelperModified = function(e, tr) {
		debugger;
		var $originals = tr.children();

		var $helper = tr.clone();

		$helper.children().each(function(index) {
		$(this).width($originals.eq(index).width())

		});

		return $helper;

		},

		updateIndex = function(e, ui) {
		$('td.index', ui.item.parent()).each(function (i) {
		$(this).html(i + 1);

		});

		};

		$("#你的table的ID tbody").sortable({
		helper: fixHelperModified,	

		stop: updateIndex

		}).disableSelection();

其实只需$("#sort tbody").sortable().disableSelection();就可以实现所需功能。
另外两个回调函数作用为：

helper: fixHelperModified,这个函数的作用是：克隆你正在拖动的tr，然后依次设置你克隆的那个tr的td的宽度，使之拖动时的宽度与原来一致。也就是说，不回调这个函数也可以，就是拖动的时候tr中的单元格宽度会变小。当然了不影响放手后的宽度。

stop: updateIndex，这个函数的作用是，拖动后维护现在索引(即第一列的值)。

注意事项：
页面中必须要先有table和tbody的实际体存在！！！
类似下图

我的项目中一开始这个页面table、tbody都是没有的，都是在js中load进来的，所以没有产生效果