这两天用到了jquery UI 中的 sortable 做 table 排序，遇到了一些问题，到网上查资料都是千篇一律的，中华文章一大抄啊！最后问题解决了，决定自己写一篇记录一下！
首先我们来看一下一段简单的代码及效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
<script src="jquery/dist/jquery.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
</head>
<style>
table th{
text-align: center;
}
</style>
<body>
<div id="table">
<table class="table table-bordered table-striped table-hover text-center" style="width:50%;">
<thead>
<tr>
<th>序号</th><th>用户姓名</th><th>用户部门</th><th>用户手机</th>
</tr>
</thead>
<tbody class="table-striped ">
<tr style="background:red;">
<th>1</th><td>张三</td><td>18</td><td>18*********</td>
</tr>
<tr>
<th>2</th><td>李四</td><td>19</td><td>18*********</td>
</tr>
<tr>
<th>3</th><td>王五</td><td>19</td><td>18*********</td>
</tr>
</tbody>
</table>
</div>
$("tbody").sortable().disableSelection();</script>
</body>
</html>
很简单一句 js 代码就能实现拖拽换行的效果！但是，会发现有很多的小问题，比如拖拽的时候被拖拽的 tr 里 的 td 的样式似乎不对，比如可以一直往下拖拽而导致页面出现滚动条，比如被拖拽的 tr 会整体偏移并不在你想要的位置，等等。这些问题都需要从它的配置参数和事件中寻求解决方法！
先来看看 sortable 有哪些参数？（源自官网 jQuery UI 1.10）
1、appendTo
作用：确定可移动的辅助元素在拖动时可以被添加到何处。
例子：$( "tbody" ).sortable({ appendTo: document.body });
它的参数值支持的对象有：jQuery对象、Element、Selector（选择器）、String（"parent"），默认值为 "parent"。
2、axis
作用：确定元素可以在水平或垂直方向上实现拖动。
例子：$( "tbody" ).sortable({ axis: "x"});
参数值："x"，"y"，false，默认值为 false 水平或垂直都可以实现拖动。
3、cancel
作用： 对符合选择器匹配规则的元素不进行排序。
例子：$( "tbody" ).sortable({ cancel: "tr"});于是 tr 就不可被拖动；
参数值：Select 选择器，默认值为："input,textarea,button,select,option"。
4、connectWith
作用：连接两个可拖动的 sortable ，列表中的项目需被连接的另一个 sortable 元素的选择器。这是一个单向关系，如果您想要项目被双向连接，必须在两个 sortable 元素上都设置 connectWith 选项。
例子：首先可以做两个 table (table1、table2)，
$("#table1 tbody").sortable({ connectWith: "#table2 tbody" }).disableSelection();
$("#table2 tbody").sortable({ connectWith: "#table1 tbody" }).disableSelection();
于是，就可以实现两个 table 之间 tr 的拖动功能。
参数值：Select 选择器，默认为 false 。
5、containment
作用：定义一个边界，限制拖动范围在指定的DOM元素内。
注意：为限制拖动范围，指定的元素必须有一个可计算的宽度和高度（但不一定是显式的）。例如，如果你的sortable元素的子元素有float: left样式，
并且指定containment: "parent"，那么sortable/parent容器必须要有float: left样式，或者他将有height: 0样式，导致不确定的行为。
例子：$( "tbody" ).sortable({ containment: "tbody"});这样就可以将 tr 的可拖动范围限制在 tbody 中，不会出现滚动条的情况！
参数值：Element元素、Select选择器、String（"parent"、"document"、"window"）。
6、cursor
作用：定义拖动是鼠标的样式。
例子：$( "tbody" ).sortable({ cursor: "move"});这样在拖动的时候鼠标就可以变为 十字光标 。
7、cursorAt
作用：定义鼠标在拖动时候的位置，坐标可通过一个或两个键的组合成一个哈希给出： { top, left, right, bottom }。
例子：$( "tbody" ).sortable({cursorAt: { left: 5,top:5 }});
效果：当拖动时，被拖动的行会自动移动，最终鼠标与被拖动行的相对位置为{left:5,top:5}。
参数值：{ top, left, right, bottom }（object），默认值：false。
8、delay
作用：在排序拖动开始多少毫秒后元素才开始移动； 这可以防止意外的点击造成元素的拖动。
例子：$( "tbody" ).sortable({ delay: 150});
参数值：Integer 毫秒。
扫一扫
667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
