这篇文章主要介绍了射流研究…拖拽排序插件Sortable.js用法，结合实例形式分析了拖拽排序插件Sortable.js功能、使用方法及相关操作注意事项，需要的朋友可以参考下
本文实例讲述了射流研究…拖拽排序插件Sortable.js用法。分享给大家供大家参考，具体如下：
最近由于项目功能设计的原因，需要对桌子中的行实现拖拽排序功能，找来找去发现Sortable.js能很好的满足这个需求，而且它还是开源的，于是乎就开始学习使用Sortable.js，再然后就有了这篇文章。
特点：
轻量级但功能强大
移动列表项时有动画
支持触屏设备和大多数浏览器(IE9及以下除外)
支持单个列表容器内部拖拽排序，也支持两个列表容器互相拖拽排序
支持拖放操作和可选择的文本
非常友善的滚动效果
基于原生HTML5中的拖放应用程序界面
支持多种框架（角度、Vue、反应等)
支持所有的半铸钢钢性铸铁(铸造半钢)框架，如：自举
简单的API，方便调用
加拿大
不依赖于jQuery
：https://github。com/ruba xa/Sortable
或者点击此处本站下载
运行效果如下图所示：
单个列表容器内部拖拽排序
头
script src= ~/Scripts/jquery-3。3 .1 .量滴js /脚本
script src= ~/Scripts/Sortable-master/Sortable。量滴js /脚本
脚本类型=文本/javascript
$(文档)。ready(function () {
var ul=文档。getelementbyid(“infos”)；
var可排序=新的可排序(ul，{
句柄：输入，李,//设置李、输入支持拖拽
动画：150,//设置动画时长
//元素拖动开始
onStart:函数(/* *事件*/事件){
evt。旧索引；//父元素中的元素索引，此处指的是里的索引值
},
//元素拖动结束
onEnd: function (/**Event*/evt) {
var lis=$( # infos Li )；
//拖拽完毕后重新设置序号，使其连续
for(var I=0；长度；i ) {
var no=$(lis[i]).find( input:eq(0))；
编号val(I 1)；
}
}
});
});
/脚本
风格
李{
光标：指针；
垫底：5px
列表样式：无；
}
/风格
/头
身体
ul id=infos
里
输入类型=文本值=1 /
输入类型=文本值=层次结构/
挑选
选项值=""-请选择-/选项
选项值=1 目标/选项
选项值=2 命题/选项
/选择
/李
里
输入类型=文本值=2 /
输入类型=文本值=层次结构/
挑选
选项值=""-请选择-/选项
选项值=1 消除/选项
选项值=2 对齐/选项
/选择
/李
里
输入类型=文本值=3 /
输入类型=文本值=层次结构/
挑选
选项值=""-请选择-/选项
选项值=1 优化/选项
选项值=2 部署/选项
/选择
/李
/ul
/body
两个列表容器相互拖拽排序
头
script src= ~/Scripts/jquery-3。3 .1 .量滴js /脚本
script src= ~/Scripts/Sortable-master/Sortable。量滴js /脚本
脚本类型=文本/javascript
$(文档)。ready(function () {
var infosOne=document。getelementbyid( infosOne )；
var Sortable one=new Sortable(infosOne，{
组：郭,//若需要在两个列表容器间拖拽排序，那组的值必须相同
句柄：输入，李,//设置李、输入支持拖拽
动画：150,//设置动画时长
//元素拖动开始
onStart:函数(/* *事件*/事件){
evt。旧索引；//父元素中的元素索引，此处指的是里的索引值
},
//元素拖动结束
onEnd: function (/**Event*/evt) {
var lis=$( # infosOne Li )；
for(var I=0；长度；i ) {
var no=$(lis[i]).find( input:eq(0))；
编号val(I 1)；
}
lis=$( # infosTwo Li )；
for(var I=0；长度；i ) {
var no=$(lis[i]).find( input:eq(0))；
编号val(I 1)；
}
}
});
var infosTwo=document。getelementbyid( infosTwo )；
var Sortable two=new Sortable(infosTwo，{
组：郭,//若需要在两个列表容器间拖拽排序，那组的值必须相同
句柄：输入，李,//设置李、输入支持拖拽
动画：150,//设置动画时长
//元素拖动开始
onStart:函数(/* *事件*/事件){
evt。旧索引；//父元素中的元素索引，此处指的是里的索引值
},
//元素拖动结束
onEnd: function (/**Event*/evt) {
var lis=$( # infosOne Li )；
for(var I=0；长度；i ) {
var no=$(lis[i]).find( input:eq(0))；
编号val(I 1)；
}
lis=$( # infosTwo Li )；
for(var I=0；长度；i ) {
var no=$(lis[i]).find( input:eq(0))；
编号val(I 1)；
}
}
});
});
/脚本
/头
身体
ul id=infosOne
里
输入类型=文本值=1 /
输入类型=文本值=层次结构/
挑选
选项值=""-请选择-/选项
选项值=1 目标/选项
选项值=2 命题/选项
/选择
/李
里
输入类型=文本值=2 /
输入类型=文本值=层次结构/
挑选
选项值=""-请选择-/选项
选项值=1 消除/选项
选项值=2 对齐/选项
/选择
/李
里
输入类型=文本值=3 /
输入类型=文本值=层次结构/
挑选
选项值=""-请选择-/选项
选项值=1 优化/选项
选项值=2 部署/选项
/选择
/李
/ul
人力资源/
ul id=infosTwo
里
输入类型=文本值=1 /
输入类型=文本值=层次结构/
挑选
选项值=""-请选择-/选项
选项值=1 目标任务/选项
选项值=2 论题议题/选项
/选择
/李
里
输入类型=文本值=2 /
输入类型=文本值=层次结构/
挑选
选项值=""-请选择-/选项
选项值=1 消除排除/选项
选项值=2 机敏的敏捷的/选项
/选择
/李
里
输入类型=文本值=3 /
输入类型=文本值=层次结构/
挑选
选项值=""-请选择-/选项
选项值=1 优化使最优化/选项
选项值=2 发布部署/选项
/选择
/李
/ul
/body
常见配置项及事件
var sortable=new Sortable(el，{
群组：名称，//或{姓名： . ，拉：[真，假，克隆]，放：[真，假，数组] }
sort: true，//在列表中排序
延迟：0，//以毫秒为单位的时间，用于定义排序开始的时间
touchStartThreshold: 0，//px，在取消延迟的拖动事件之前，指针应该移动多少像素
禁用：false，//如果设置为没错，则禁用可排序的。
store: null，//@see Store
动画：150，//ms，排序时移动项目的动画速度，` 0 —无动画
句柄：。我的句柄，//在列表项中拖动句柄选择器
筛选器：。忽略元素，//不会导致拖动的选择器(字符串或函数)
preventOnFilter: true，//触发过滤器时调用event.preventDefault()
可拖动：。项目，//指定元素内的哪些项应该是可拖动的
ghostClass: sortable-ghost ，//放置占位符的类名
已选择的类：“可排序的-已选择的”，//所选项的类名
dragClass: sortable-drag ，//拖动项的类名
dataIdAttr:数据标识,
forceFallback: false，//忽略HTML5 DnD行为并强制回退生效
fallbackClass: sortable-fallback ，//使用强制回退时克隆的数字正射影像图元素的类名
fallbackOnBody: false，//将克隆的数字正射影像图元素追加到文档正文中
fallbackTolerance: 0，//以像素为单位指定鼠标在被视为拖动之前应该移动的距离。
scroll: true，//或html元素
scrollFn: function(offsetX，offsetY，originalEvent，touchEvt，hoverTargetEl) {.},//如果您有自定义滚动条，滚动Fn可用于自动滚动
scrollSensitivity: 30，//px鼠标必须多靠近一条边才能开始滚动。
scrollSpeed: 10，//px
setData:函数(/** DataTransfer */dataTransfer，/** HTMLElement*/dragEl) {
dataTransfer.setData(Text ，dragel。文字内容)；//“数据传输”html 5拖动事件的对象
},
//元素被选择
选择时：函数(/* *事件*/事件){
evt。旧索引；//父元素中的元素索引
},
//元素拖动开始
onStart:函数(/* *事件*/事件){
evt。旧索引；//父元素中的元素索引
},
//元素拖动结束
onEnd: function (/**Event*/evt) {
var itemEl=evt.item//拖动的html元素
evt。到；//目标列表
evt.from//上一个列表
evt。旧索引；//元素在旧父元素中的旧索引
evt。新索引；//元素在新父元素中的新索引
},
//元素从另一个列表拖放到该列表中
onAdd: function (/**Event*/evt) {
//与竖着相同的属性
},
//更改了列表中的排序
更新：函数(/* *事件*/事件){
//与竖着相同的属性
},
//由列表的任何更改（添加/更新/移除)调用
on sort:function(/* * Event */evt){
//与竖着相同的属性
},
//元素从列表中移除到另一个列表中
删除时：函数(/* *事件*/事件){
//与竖着相同的属性
},
//尝试拖动已筛选的元素
on filter:function(/* * Event */evt){
var itemEl=evt.item//html元素接收"鼠标按下|点击开始"事件。
},
//当您在列表中或列表之间移动某项时，会发生
onMove: function (/**Event*/evt，/**Event*/originalEvent) {
//例如：http://jsbin.com/tuyafe/1/edit？js，输出
evt.dragged//拖动的html元素
evt.draggedRect//text rectangle {左上右下}
evt.related//html元素，其上有引导
evt.relatedRect//文本矩形
originalEvent.clientY//鼠标位置
//返回错误—用于取消
},
//创建元素的克隆时调用
onClone:函数(/* *事件*/事件){
var origEl=evt.item
var cloneEl=evt.clone
}
});
属性
组：字符串或数组
排序：布尔型定义是否列表单元是否可以在列表容器内进行拖拽排序；
延迟：数字定义鼠标选中列表单元可以开始拖动的延迟时间；
禁用：布尔型定义是否此可分类的对象是否可用，为真实的时可分类的对象不能拖放排序等功能，为错误的时为可以进行排序，相当于一个开关；
动画：数字单位：毫秒，定义排序动画的时间；
手柄：选择器格式为简单钢性铸铁选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；
过滤器：选择器格式为简单钢性铸铁选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用","分隔；
可拖动：选择器格式为简单钢性铸铁选择器的字符串，定义哪些列表单元可以进行拖放
幽灵班：选择器格式为简单钢性铸铁选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个类，我们可以通过这种方式来给影子元素进行编辑样式；
chosenClass:选择器格式为简单钢性铸铁选择器的字符串，当选中列表单元时会给该单元增加一个类；
强制回退：布尔值如果设置为真实的时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；
fallbackClass:字符串当强制回退设置为真实的时，拖放过程中鼠标附着单元的样式；
滚动：布尔型默认为没错，当排序的容器是个可滚动的区域，拖放可以引起区域滚动
事件：
onChoose:函数列表单元被选中的回调函数
onStart:功能列表单元拖动开始的回调函数
onEnd:函数列表单元拖放结束后的回调函数
onAdd:函数列表单元添加到本列表容器的回调函数
更新：函数列表单元在列表容器中的排序发生变化后的回调函数
一个回调函数，将一个列表元素移动到另一个列表容器中。
OnFilter:函数试图选择由Filter过滤的列表单元格的回调函数。
在一个列表容器或多个列表容器中移动列表单元时的回调函数。
OnClone:function创建列表单元副本时的回调函数。
事件对象：
每个函数中的事件略有不同，可以通过输出对象查看对象的属性。以下是一些例子：
to:html element-移动到列表容器
From:HTMLElement -源的列表容器
Item:HTMLElement -移动的列表单元。
Clone:HTMLElement -副本的列表单元。
ol index:ol index:number/undefined-列表容器中的原始序列号
new index:new index:number/undefined-列表容器中的新序列号。
方法
选项(名称[，值])
或者获取设置项的参数。使用方法类似于jQuery。没有第二个参数来获取与option中第一个参数对应的值。如果有第二个参数，它将被重新赋给与第一个参数对应的值。
最靠近的
返回满足选择器条件的元素集合中的第一项。
托阵列()
可序列化列表单元的data-id(可以通过配置项中的dataIdAttr修改)被放入一个数组中，并返回给这个数组。
排序()
通过自定义列表单元格的data-id数组对其进行排序。
保存()
销毁()
PS：这里再为大家推荐一款关于排序的演示工具供大家参考：
在线动画演示插入/选择/冒泡/归并/希尔/快速排序算法过程工具：
http://tools.jb51.net/aideddesign/paixu_ys
更多对JavaScript感兴趣的读者可以参考我们的专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》和0755-79000。
希望这篇文章对大家的JavaScript编程有所帮助。
