可排序. js拖放排序用法分析

最近公司项目中经常用到一个拖放式的Sortable.js插件，所以我一有空就看了Sortable.js的源代码，一共1300多行，相当完美。

官方网站： http://rubaxa.github.io/Sortable/

拖动时主要由这些事件完成。

Ondragstart事件：当拖动的元素开始被拖动时触发的事件，作用于被拖动的元素。ondragenter事件：当被拖动的元素进入目标元素时触发的事件，它作用于目标元素。ondragover事件：当被拖动的元素在目标元素上移动时触发的事件。此事件作用于目标元素ondrop事件：被拖动元素在目标元素上时鼠标释放触发的事件，此事件作用于目标元素ondragend事件：拖动完成后触发的事件，作用于被拖动元素。

主要是在拖动过程中发生ondragstart事件和ondragover事件时，节点交换位置，实际上是互相交换节点。当然，这只是最简单的拖动排序方式。其中使用了很多技术，比如拖动滚动条时判断拖动元素上方根节点的父节点是滚动还是滚动窗口上方的滚动条，拖动时使用getBoundingClientRect()属性判断鼠标是在dom节点的左边、右边、上面还是下面。还有，用回调和函数编程来声明函数，用布尔值来加减，判断0和1，用事件绑定来判断两个列表中不同的元素，都是非常有趣的技巧。

注意：这个插件是用html5拖动的，所以它不支持ie9以下的浏览器

接下来我们来看看这个简单的dome，首先加载他的拖放js Sortable.js插件，用app.css创建一个简单的拖放，传一个dom节点进去非常简单，第二个参数传一个空的对象进去。

当然app.css，加不加没关系，不加就需要加一个样式。可排序-ghost { opa city 3360 0.4；背景色-color : # F4e2c 9；}拖动时，有一个看起来更好的阴影效果

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' /title无标题文档/title/headlink href=' app . CSS ' rel='样式表' type=' text/CSS '/script src=' http : sortable . js '/脚本正文ul id=' foo ' class=' block _ _ list block _ _ list _ word ' li1/Li Li Li 2/Li Li/Li Li Li 4/Li Li Li Li 5/Li Li Li 6/Li Li Li 7/Li li8/Li/ul script sortable . create(document . getelementbyid(')/script /body/html这个插件在拖动的时候还提供了动画，这让拖动更加炫目。增加一个参数很简单，animation: 150，在拖动时间内动画结束的时间。ie9浏览器不支持以下带有css3动画的浏览器

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8/