最近由于项目功能设计的原因，需要对table中的行实现拖拽排序功能，找来找去发现Sortable.js能很好的满足这个需求，而且它还是开源的，于是乎就开始学习使用Sortable.js，再然后就有了这篇文章。
特点：
轻量级但功能强大
移动列表项时有动画
支持触屏设备和大多数浏览器（IE9及以下除外）
支持单个列表容器内部拖拽排序，也支持两个列表容器互相拖拽排序
支持拖放操作和可选择的文本
非常友善的滚动效果
基于原生HTML5中的拖放API
支持多种框架（Angular、Vue、React等）
支持所有的CSS框架，如：Bootstrap
简单的API，方便调用
CDN
不依赖于jQuery
下载地址：https://github.com/RubaXa/Sortable
或者点击此处本站下载
运行效果如下图所示：
单个列表容器内部拖拽排序
<head> <script src="https://www.jb51.net/~/Scripts/jquery-3.3.1.min.js"></script> <script src="https://www.jb51.net/~/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> <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>
两个列表容器相互拖拽排序
<head> <script src="https://www.jb51.net/~/Scripts/jquery-3.3.1.min.js"></script> <script src="https://www.jb51.net/~/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> <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> <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>
常见配置项及事件