jquery插件之dragsort使用心得

本文介绍了在项目中使用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);
        }

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值