下载地址:https://github.com/RubaXa/Sort...
官方Demo:http://rubaxa.github.io/Sortab...
单个列表容器内部拖拽排序
<head> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script src="~/Scripts/Sortable-master/Sortable.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var ul = document.getElementById("infos"); var sortable = new Sortable(ul, { handle: "input,li",//设置li、input支持拖拽 animation: 150,//设置动画时长 // Element dragging started onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent,此处指的是li的索引值 }, // Element dragging ended onEnd: function (/**Event*/evt) { var lis = $("#infos li"); //拖拽完毕后重新设置序号,使其连续 for (var i = 0; i < lis.length; i++) { var no = $(lis[i]).find("input:eq(0)"); no.val(i + 1); } } }); }); </script> <style> li{ cursor:pointer; padding-bottom:5px; list-style:none; } </style> </head> <body> <ul id="infos"> <li> <input type="text" value="1" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">objective</option> <option value="2">proposition</option> </select> </li> <li> <input type="text" value="2" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">eliminate</option> <option value="2">alige</option> </select> </li> <li> <input type="text" value="3" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">optimize</option> <option value="2">deploy</option> </select> </li> </ul> </body>两个列表容器相互拖拽排序
<span style="font-size:14.4px;"><head> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script src="~/Scripts/Sortable-master/Sortable.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var infosOne = document.getElementById("infosOne"); var sortableOne = new Sortable(infosOne, { group: "guo",//若需要在两个列表容器间拖拽排序,那group的值必须相同 handle: "input,li",//设置li、input支持拖拽 animation: 150,//设置动画时长 // Element dragging started onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent,此处指的是li的索引值 }, // Element dragging ended onEnd: function (/**Event*/evt) { var lis = $("#infosOne li"); for (var i = 0; i < lis.length; i++) { var no = $(lis[i]).find("input:eq(0)"); no.val(i + 1); } lis = $("#infosTwo li"); for (var i = 0; i < lis.length; i++) { var no = $(lis[i]).find("input:eq(0)"); no.val(i + 1); } } }); var infosTwo = document.getElementById("infosTwo"); var sortableTwo = new Sortable(infosTwo, { group:"guo",//若需要在两个列表容器间拖拽排序,那group的值必须相同 handle: "input,li",//设置li、input支持拖拽 animation: 150,//设置动画时长 // Element dragging started onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent,此处指的是li的索引值 }, // Element dragging ended onEnd: function (/**Event*/evt) { var lis = $("#infosOne li"); for (var i = 0; i < lis.length; i++) { var no = $(lis[i]).find("input:eq(0)"); no.val(i + 1); } lis = $("#infosTwo li"); for (var i = 0; i < lis.length; i++) { var no = $(lis[i]).find("input:eq(0)"); no.val(i + 1); } } }); }); </script> </head> <body> <ul id="infosOne"> <li> <input type="text" value="1" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">objective</option> <option value="2">proposition</option> </select> </li> <li> <input type="text" value="2" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">eliminate</option> <option value="2">alige</option> </select> </li> <li> <input type="text" value="3" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">optimize</option> <option value="2">deploy</option> </select> </li> </ul> <hr /> <ul id="infosTwo"> <li> <input type="text" value="1" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">目标任务</option> <option value="2">论题议题</option> </select> </li> <li> <input type="text" value="2" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">消除排除</option> <option value="2">机敏的敏捷的</option> </select> </li> <li> <input type="text" value="3" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">优化使最优化</option> <option value="2">发布部署</option> </select> </li> </ul> </body>常见配置项及事件
定义是否列表单元是否可以在列表容器内进行拖拽排序;delay:number
定义鼠标选中列表单元可以开始拖动的延迟时间;disabled:boolean
定义是否此sortable对象是否可用,为true时sortable对象不能拖放排序等功能,为false时为可以进行排序,相当于一个开关;animation:number
单位:ms,定义排序动画的时间;handle:selector
格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动;filter:selector
格式为简单css选择器的字符串,定义哪些列表单元不能进行拖放,可设置为多个选择器,中间用“,”分隔;draggable:selector
格式为简单css选择器的字符串,定义哪些列表单元可以进行拖放ghostClass:selector
格式为简单css选择器的字符串,当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况,此配置项就是来给这个影子单元添加一个class,我们可以通过这种方式来给影子元素进行编辑样式;chosenClass:selector
格式为简单css选择器的字符串,当选中列表单元时会给该单元增加一个class;forceFallback:boolean
如果设置为true时,将不使用原生的html5的拖放,可以修改一些拖放中元素的样式等;fallbackClass:string
当forceFallback设置为true时,拖放过程中鼠标附着单元的样式;scroll:boolean
默认为true,当排序的容器是个可滚动的区域,拖放可以引起区域滚动事件:onChoose:function
列表单元被选中的回调函数onStart:function
列表单元拖动开始的回调函数onEnd:function
列表单元拖放结束后的回调函数onAdd:function
列表单元添加到本列表容器的回调函数onUpdate:function
列表单元在列表容器中的排序发生变化后的回调函数onRemove:function
列表元素移到另一个列表容器的回调函数onFilter:function
试图选中一个被filter过滤的列表单元的回调函数onMove:function
当移动列表单元在一个列表容器中或者多个列表容器中的回调函数onClone:function
当创建一个列表单元副本的时候的回调函数
事件对象在各个函数中略有不同,可通过输出对象查看对象的属性,下面简单列举几个:
移动到列表容器from:HTMLElement--
来源的列表容器item:HTMLElement--
被移动的列表单元clone:HTMLElement--
副本的列表单元oldIndex:number/undefined--
在列表容器中的原序号newIndex:number/undefined--
在列表容器中的新序号方法option(name[,value])
获得或者设置项参数,使用方法类似于jQuery用法,没有第二个参数为获得option中第一个参数所对应的值,有第二个参数时,将重新赋给第一个参数所对应的值;closest()
返回满足selector条件的元素集合中的第一个项toArray()
序列化可排序的列表单元的data-id(可通过配置项中dataIdAttr修改)放入一个数组,并返回这个数组中sort()
通过自定义列表单元的data-id的数组对列表单元进行排序save()destroy()