jQuery拖放排序插件DDSort

最新推荐文章于 2021-05-05 16:19:09 发布

似曾相识-

最新推荐文章于 2021-05-05 16:19:09 发布

阅读量1.8k

点赞数 1

分类专栏：前端性能/框架文章标签： DDSort拖放排序插件

本文链接：https://blog.csdn.net/liaozhongping/article/details/49535407

版权

前端性能/框架专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

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

接下来回到插件，先看看漂亮的UI（参照Teambition的任务面板做的，算不算广告），插件目前只做了（针对）上下拖放排序，左右拖放排序等有时间再做（我希望API是极度简单的，即便增加左右排序）：

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

1、确定要拖放的一堆元素，正常情况是一堆li（假设现在的Demo是li）。

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

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

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

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

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

四、使用方法：

1、假设Html结构如下：

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

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

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

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

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

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

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

七、插件地址与下载：https://github.com/JSON199216/DDSort