一个简洁漂亮的jQuery拖放排序插件DDSort

拖放排序是WEB应用中常见的功能。虽然网上有不少别人已经造好的轮子，可是就我我的而言，没事就喜欢研究原理，本身造轮子，无论强大与否，简洁够用就是个人目标，再一个就是本身写的东西，应用起来驾轻就熟，修改或者扩展起来也是驾轻就熟，相比一些API不够详细，或者说用户体验很差（不够简明）的API来讲，或者说插件自己就没考虑周到，考虑周到又显得臃肿来讲，使用它还不如造它。

接下来回到插件，先看看漂亮的UI（参照Teambition的任务面板作的，算不算广告 [/惊叹]），插件目前只作了（针对）上下拖放排序，左右拖放排序等有时间再作（我但愿API是极度简单的，即使增长左右排序）：

2、插件原理（授人以鱼还要授人以渔）：

一、肯定要拖放的一堆元素，正常状况是一堆li（假设如今的Demo是li）。

二、给每一个li添加鼠标按下(elem.onmousedown)，和按下移动(document.onmousemove)，按下抬起的事件(document.onmouseup)，相似于拖拽的原理，鉴于性能，应该考虑用事件委托的形式。

三、当拖动元素执行move事件的时候，在它前面建立并添加一个跟它同样样式的元素并清空内容用于占位操做（假设这个占位元素叫clone），再把拖动元素设置为绝对定位，并把它的DOM结构放到父级（ul）的末尾。

四、在移动过程当中判断拖动的元素的top值与clone元素的上一个兄弟节点比较，若是top小于上一个兄弟节点的offset().top值（这里，本插件用top值与offset().top - 兄弟节点的height()/2，交互形式不一样而已），那么就将clone元素与上一个兄弟节点交换DOM结构便可，同理判断top是否大于下一个兄弟节点的offset().top值，若是大于就让clone元素与下一个兄弟节点交换DOM结构便可。

五、当中的一些细节处理和兼容处理先略过。

 

3、简洁：插件加上那么多漂亮的空行和注释才115行GitHub地址。

 

4、使用方法：

一、假设Html结构以下：

<div id="wrap">
    <ul>
        <li>...</li>
        <li>...</li> ... </ul>
</div>

二、依次引入jquery.js和ddsort.js，而后使用DDSort API实现如图拖放排序效果：

$( '#wrap' ).DDSort({ target: 'li', floatStyle: { 'border': '1px solid #ccc', 'background-color': '#fff' } });

 

5、详细API（其实也是极少极简单）：

DDSort方法只接受一个JSON对象类型的参数，如下是对这个参数的描述。

参数列表	类型	描述
target	string	插件内部使用的是jQuery的on方法绑定的事件，此参数就是on方法上的选择器字符串
cloneStyle	object	可选，设置占位符元素的样式
floatStyle	object	可选，设置拖动元素的样式
down	function	可选，鼠标按下时执行的函数
move	function	可选，鼠标移动时执行的函数
up	function	可选，鼠标抬起时执行的函数

 

6、插件目前还很小，虽然够正常的使用，可是有些不正常的样式可能还未考虑到，好比说当li的某个父级有相对定位时（父级不是body），拖动元素的left，top值就会存在问题，固然也许这个跟业务的增加和DOM结构有关，目前我还没接触到这样的结构，因此欢迎有志趣的小伙伴Fork DDSort，提交你酷炫简洁的代码。

 

7、插件地址与下载：https://github.com/Barrior/DDSort，感谢Star。