该插件也支持删除拖拽列表的节点，主要是设置filter 参数，改参数可以设置成函数，但是设置成函数的时候不还要自己定义拖拽，显得有些麻烦，所以一般设置成class，或者是tag，设置成class和tag的时候就是做拖拽列表中含有calss，tag的节点可以点击的时候可以触发onFilter函数，触发会传递一个evt参数进来evt.item 就是class或者tag的dom节点，可以通过他们的血缘关系从而删除需要删除的节点。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <link href="https://www.jb51.net/st/app.css" type="text/css"/> <script src="https://www.jb51.net/Sortable3.js"></script> <body> <body> <!-- Editable list --> <a></a> <div> <div> <div><div data-force="5">Editable list</div></div> <div> <ul> <li>Оля<i>✖</i></li> <li>Владимир<i>✖</i></li> <li>Алина<i>✖</i></li> </ul> </div> </div> </div> <script> // Editable list var editableList = Sortable.create(document.getElementById('editable'), { animation: 150, filter: '.js-remove', onFilter: function (evt) { console.log(evt.item) evt.item.parentNode.parentNode.removeChild(evt.item.parentNode); } }); </script> </body> </html>
Sortable.js 接口参数还有很多个，不 一 一 做dome了列出来给大家看看，其中比较常用的是上面所说的dome参数，还有handle这个参数也常用规定哪些calss，或者tag拖拽。
var defaults = { group: Math.random(), //产生一个随机数 //产生一个随机数 //改参数是对象有三个两个参数 pull: 拉, put:放 默认都是是true pull还有一个值是: 'clone', pull: 拉, put:放 设置为false 就不能拖拽了， 如果 pull 这种为'clone'则可以重一个列表中拖拽到另一个列表并且克隆dom节点， name：是两个或者多个列表拖拽之间的通信，如果name相同则他们可以互相拖拽 sort: true, // 类型：Boolean,分类 false时候在自己的拖拽区域不能拖拽，但是可以拖拽到其他区域，true则可以做自己区域拖拽或者其他授权地方拖拽 disabled: false, //类型：Boolean 是否禁用拖拽 true 则不能拖拽 默认是true store: null, // 用来html5 存储的 改返回 拖拽的节点的唯一id handle: null, //handle 这个参数是设置该标签，或者该class可以拖拽 但是不要设置 id的节点和子节点相同的tag不然会有bug scroll: true, //类型：Boolean，设置拖拽的时候滚动条是否智能滚动。默认为真，则智能滚动，false则不智能滚动 scrollSensitivity: 30, //滚动的灵敏度,其实是拖拽离滚动边界的距离触发事件的距离边界+-30px的地方触发拖拽滚动事件， scrollSpeed: 10, //滚动速度 draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',//draggable 判断拖拽节点的父层是否是ou ul ghostClass: 'sortable-ghost', // 排序镜像class,就是当鼠标拉起拖拽节点的时候添加该class chosenClass: 'sortable-chosen', // //为拖拽的节点添加一个class 开始拖拽鼠标按下去的时候 添加该class ignore: 'a, img', //a 或者是img filter: null, //改参数可以传递一个函数，或者字符串，字符串可以是class或者tag，然后用于触发oFilter函数，这样可以用来自定义事件等 animation: 0, //拖拽动画时间戳 setData: function (dataTransfer, dragEl) { //设置拖拽传递的参数 dataTransfer.setData('Text', dragEl.textContent); }, dropBubble: false, // 发生 drop事件 拖拽的时候是否阻止事件冒泡 dragoverBubble: false, //发生 dragover 事件 拖拽的时候是否阻止事件冒泡 dataIdAttr: 'data-id', //拖拽元素的id 数组 delay: 0, //延迟拖拽时间, 其实就是鼠标按下去拖拽延迟 forceFallback: false, // 不详 fallbackClass: 'sortable-fallback', // 排序回退class fallbackOnBody: false,// 是否把拖拽镜像节点ghostEl放到body上 };
下面是Sortable.js插件源码，本人花了一些时间做了注释，有兴趣的朋友可以研究下。
如果您发现哪些地方有错误注释可以联系我的邮箱281113270@qq.com ；