jquery插件之dragsort使用心得

最新推荐文章于 2025-06-24 08:45:44 发布

Homer_Simpson

最新推荐文章于 2025-06-24 08:45:44 发布

阅读量7.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Homer_Simpson/article/details/81101019

本文介绍了在项目中使用jQuery dragsort插件实现图片拖拽功能的过程及遇到的问题。通过设置itemSelector解决拖动模块错误问题，并在拖动结束时用for循环更新li id以保持拖动后的顺序。解决问题的关键在于仔细阅读文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天接到来公司第一个任务，这里总结一下。在今天下午以前我以为我可能永远都解决不了这个问题了，结果师兄刷刷几下的就解决了，我还是太傻了，唉。

遇到的第一个任务就是在一个已经基本成熟的项目里实现按一个小功能——拖拽功能：
使用场景：用户上传图片的时候选择了一些图片，用户可以通过用鼠标拖动图片，交换图片位置。
解决方案：使用jquery里面的一个dragsort插件。
遇到的问题（bug）：
1. 使用dragsort后，导致上传图片模块也能够拖动，这对用户是不友好的；
2. 点击开始上传按钮，图片会按照一开始选择进来的顺序上传，不会按照用户拖动交换图片位置以后的顺序上传；
这里写图片描述
dragsort官方使用方法：点击这里进入。
问题1解决方法：查看官方文档，发现插件中有一个itemSelector方法：

可移动列表项的css选择器。只会匹配列表容器的直接子元素。默认值是第一个孩子的标签名称，例如LI。

    The css selector of the list items that are moveable.
     Will only match elements that are immediate children of list container. 
     The default is tag name of first child e.g. LI.

问题2解决方法：每当拖动事件结束后调用一个函数：利用for循环，依次获取每个li，并给拖动后的li赋予新的id。

var liId= $('.fileBoxUl li');
        for(var i =0;i<liId.length-1;i++){
            liId[i].setAttribute('id','fileBox_WU_FILE_'+i);
        }

总结：套用师兄的话：遇到问题要多仔细看文档，不要自己瞎想。