本文实例讲述了射流研究…拖拽排序插件Sortable.js用法。分享给大家供大家参考，具体如下：

最近由于项目功能设计的原因，需要对桌子中的行实现拖拽排序功能，找来找去发现Sortable.js能很好的满足这个需求，而且它还是开源的，于是乎就开始学习使用Sortable.js，再然后就有了这篇文章。

特点：

轻量级但功能强大移动列表项时有动画支持触屏设备和大多数浏览器(IE9及以下除外)支持单个列表容器内部拖拽排序，也支持两个列表容器互相拖拽排序支持拖放操作和可选择的文本非常友善的滚动效果基于原生HTML5中的拖放应用程序接口支持多种框架（有角度、真空、反应等)支持所有的半铸钢钢性铸铁(铸造半钢)框架，如：引导简单的原料药，方便调用加拿大不依赖于框架下载地址：https://github。com/RuBaxa/Sortable或者点击此处本站下载

运行效果如下图所示：

单个列表容器内部拖拽排序

head script src=' http : ~/Scripts/jquery-3。3 .1 .量滴js '/script script src=' http : ~/Scripts/Sortable-master/Sortable。量滴js '/脚本脚本类型='text/javascript' $(文档)。ready(function(){ var ul=document。getelementbyid(' infos ')；var sortable=new Sortable(ul，{ handle: 'input，li '，//设置li、输入支持拖拽animation: 150，//设置动画时长//元素拖动开始onStart:函数(/* *事件*/evt){ evt。oldindex//父级中的元素索引，此处指的是里的索引值},//元素拖动结束onEnd:函数(/* *事件*/evt){ var lis=$(' # infos Li ')；//拖拽完毕后重新设置序号，使其连续for(var I=0；一。长度；i ) { var no=$(lis[i]).find('输入： eq(0)')；编号瓦尔(一1)；} } });});/脚本样式李{光标：指针；填充-底部：5 px列表式：无；} /style/headbody ul id='infos' li输入类型=“文本”值='1' /输入类型=“文本”值=“层次结构”/选择选项值='' -请选择-/选项选项值='1 '客观/选项选项值='2 '命题/选项/选择/li li输入类型=“文本”值='2' /输入类型=“文本”值=“层次结构”/选择选项值=' ' - 请选择-/选项选项值='1 '消除/option选项值='2 '对齐/option /select /li li输入类型=“文本”值='3' /输入类型=“文本”值='层次结构'/选择选项值='' -请选择-/选项选项值='1 '优化/选项选项值='2 '部署/选项/选择/Li/ul/正文两个列表容器相互拖拽排序

head script src=' http : ~/Scripts/jquery-3。3 .1 .量滴js '/script script src=' http : ~/Scripts/Sortable-master/Sortable。量滴js '/脚本脚本类型='text/javascript' $(文档)。ready(function(){ var infosOne=document。getelementbyid(' InfoSone ')；var sortableOne=new Sortable(infosOne，{ group: 'guo '，//若需要在两个列表容器间拖拽排序，那组的值必须相同手柄： '输入，li '，//设置li、输入支持拖拽animation: 150，//设置动画时长//元素拖动开始onStart:函数(/* *事件*/evt){ evt。oldindex//父级中的元素索引，此处指的是里的索引值},//元素拖动结束onEnd:函数(/* *事件*/evt){ var lis=$(' # infosOne Li ')；for(var I=0；一。长度；i ) { var no=$(lis[i]).find('输入： eq(0)')；编号瓦尔(一1)；} lis=$(' # infosTwo Li ')；for(var I=0；一。长度；i ) { var no=$(lis[i]).find('输入： eq(0)')；编号瓦尔(一1)；} } });var infosTwo=文档。getelementbyid(' infosTwo ')；var Sortable two=new Sortable(infosTwo，{ group:'guo '，//若需要在两个列表容器间拖拽排序，那组的值必须相同手柄： '输入，li '，//设置li、输入支持拖拽animation: 150，//设置动画时长//元素拖动开始onStart:函数(/* *事件*/evt){ evt。oldindex//父级中的元素索引，此处指的是里的索引值},//元素拖动结束onEnd:函数(/* *事件*/evt){ var lis=$(' # infosOne Li ')；for(var I=0；一。长度；i ) { var no=$(lis[i]).find('输入： eq(0)')；编号瓦尔(一1)；} lis=$(' # infosTwo Li ')；for(var I=0；一。长度；i ) { var no=$(lis[i]).find('输入： eq(0)')；编号瓦尔(一1)；} } });});/script/head body ul id=' infosOne ' Li输入类型=“文本”值='1' /输入类型=“文本”值=“层次结构”/选择选项值=' ' - 请选择-/选项选项值='1 '客观/选项选项值='2 '命题/选项/选择/li li输入类型=“文本”值='2' /输入类型=“文本”值=“层次结构”/选择选项值=' ' - 请选择-/选项选项值='1 '消除/option选项值='2 '对齐/option /select /li li输入类型=“文本”值='3' /输入类型=“文本”值='层次结构'/选择选项值='' -请选择-/选项选项值='1 '优化/选项选项值='2 '部署/选项/选择/li /ul hr/ul id='infosTwo' li输入类型=“文本”值='1'/输入类型=“文本”值=“层次结构”/选择选项值='' -请选择-/选项选项值='1 '目标任务/option选项值='2 '论题议题/option /select /li li输入类型=“文本”值='2' /输入类型=“文本”值='层次结构'/选择选项值='' -请选择-/选项选项值='1 '消除排除/option选项值='2 '机敏的敏捷的/option /select /li li输入类型=“文本”值='3' /输入类型=“文本”值='层次结构'/选择选项值='' -请选择-/选项选项值='1 '优化使最优化/option选项值='2 '发布部署/选项/选择/Li/ul/正文常见配置项及事件

var sortable=new Sortable(el，{ group: 'name '，//或{ name: ' . '，pull: [true，false，clone]，put: [true，false，array] } sort: true，//列表内部排序delay: 0，//定义排序何时开始的时间（以毫秒为单位)touchstartthreshold : 0 0，//px，取消延迟拖动事件之前点应该移动多少像素disabled: false，//如果设置为没错，则禁用可排序store: null，//@参见店铺动图： 150，//ms，排序时移动项目的动画速度，` 0` —无动画句柄： '。my-handle '，//在列表项筛选器：中拖动句柄选择器。忽略-元素'，//不会导致拖动的选择器(字符串或函数)preventonfilter : true，//触发时调用事件。prevent default()“filter”可拖动：项目'，//指定元素中的哪些项应该是可拖动的ghostClass: '可排序-ghost '，//放置占位符' chosenClass: '可排序-选择'的类名，//所选项dragClass: '可排序-拖动'的类名，//拖动项dataIdAttr: '数据-身份证的类名，forceFallback: false，//忽略HTML5 DnD行为并强制回退至fallbackClass: '中scroll: true，//或HTMLElement scrollFn:函数(偏移，偏移，原始偏移，接触，悬停目标El){ 0.},//如果你有自定义滚动条滚动可能用于自动滚动scroll敏化： 30，//px，鼠标必须离一个边缘多近才能开始滚动scrollSpeed: 10，//px setData:函数(/** DataTransfer */dataTransfer，/* * HTMLElement */dragEl){ DataTransfer。setdata(' Text '，dragEl。text content)；//`数据传输'对象的HTML5 DragEvent }，//元素是在选择：函数上选择的(/* *事件*/evt){ evt。oldindex//父级内的元素索引，//元素拖动启动onStart:函数(/* *事件*/evt){ evt。oldindex//父级内的元素索引，//元素拖动结束onEnd:函数(/* * Event */evt){ var itemEl=evt。项目；//将HTMLElement。等粘温度拖到；//目标列表evt.from//上一个列表evt.oldIndex//旧父evt.newIndex中元素的旧索引；//元素在新父级中的新索引}、//元素从另一个列表中拖放到列表中onAdd:函数(/* *事件*/evt) { //与竖着相同的属性}、//在列表中更改排序onUpdate:函数(/* *事件*/evt) { //与竖着相同的属性}、//由对列表的任何更改（添加/更新/删除)调用onSort:函数(/* *事件*/evt) { //与竖着相同的属性}, //元素已从列表中移除到另一个列表中onRemove:函数(/* *事件*/evt) { //与竖着相同的属性},//尝试在滤波器：函数(/* * Event */evt){ var itemEl=evt。项目；//HTMleElement正在接收" mousedown|tapstart "事件。},//当您在移动：函数上移动列表中或列表之间的项目时的事件(/* *事件*/evt，/* *事件*/originalEvent){//示例： http://jsbin.com/tuyafe/1/edit?js,output evt。拖着；//拖动的evt.draggedRect//text矩形左、上、右-下} evt.related//HTMlelement，您已经在其上引导了evt.relatedRect//text矩形原创。客户关系；//鼠标位置//返回错误——对于取消}，//在创建oncolone :函数(/* *事件*/evt)的元素克隆时调用{ var origEl=evt . item var cloneEl=evt . clone } })；属性

Group: string或arraysort: boolean定义列表单元是否可以在列表容器中拖动和排序；Delay:number定义鼠标选择列表单元开始拖动的延迟时间；Disabled:boolean定义此可排序对象是否可用。如果为真，则不能拖动可排序对象进行排序；如果为false，则可以排序，这相当于一个开关。动画：数字单位：ms，定义动画排序的时间；句柄：选择器格式是一串简单的css选择器，这样列表单元中符合选择器的元素就变成了拖动句柄。只有按住拖动手柄，才能拖动列表单元；filter:selector的格式是一串简单的css选择器，它定义了哪些列表单元不能拖放。可以设置为多个选择器，用“，”隔开；可拖动：选择器格式是一串简单的css选择器，它定义了哪些列表单元可以被拖放。ghostclass:选择器格式是一串简单的css选择器。拖动列表单元时，将生成一个副本作为阴影单元，以模拟被拖动单元的排序。这个配置项就是给这个阴影单元添加一个类，我们可以这样编辑阴影元素的样式。ChosenClass:选择器格式是一串简单的css选择器，和一个类；将被添加到列表单元中；强制回退：如果Boolean设置为true，将不使用原生html5拖放，可以修改拖放中某些元素的样式。FallbackClass:string当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；滚动：布尔值默认为真。当排序后的容器是可滚动区域时，拖放会导致该区域滚动

事件：

OnChoose:函数列表单元格选定的回调函数onStart:函数列表单元格回调函数onEnd:函数列表单元格回调函数onAdd:函数列表单元格回调函数添加到此列表容器中onUpdate:函数列表容器中的单元格行回调函数onRemove:函数回调函数筛选器：列表元素移动到另一个列表容器的函数尝试选择回调函数onRemove:函数回调函数onClone:函数回调函数当在一个列表容器中移动列表元素或创建列表元素副本时在多个列表容器中移动列表元素时

事件对象：

每个函数中的事件对象略有不同。您可以通过输出对象查看对象的属性。这里有几个：

to:HTMLElement -从以下位置移动到列表容器：HTMLElement -源列表容器项：HTMLElement -移动的列表单元克隆：HTMLElement-重复的列表单元oldindex:number/undefined-列表容器中的原始序列号new index:number/undefined-列表容器中的新序列号

方法

Option(name[，value])获取或设置项参数，使用方法类似于jQuery。没有第二个参数可以获取选项中第一个参数对应的值。如果有第二个参数，它将被再次分配给第一个参数对应的值。

Closest返回满足选择器条件的元素集合中的第一项

ToArray()将可排序列表单元的数据id(可由配置项中的dataIdAttr修改)序列化为数组，并将其返回到该数组

Sort()通过自定义列表单元格的数据id数组来对列表单元格进行排序

保存()

销毁()

PS:这里推荐一个排序的演示工具，供大家参考：

在线动画演示插入/选择/冒泡/合并/希尔/快速排序过程工具：http://tools.jb51.net/aideddesign/paixu_ys

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》和0103010

希望本文对JavaScript编程有所帮助。