jquery插件之dragsort使用心得

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

遇到的第一个任务就是在一个已经基本成熟的项目里实现按一个小功能——拖拽功能:
使用场景:用户上传图片的时候选择了一些图片,用户可以通过用鼠标拖动图片,交换图片位置。
解决方案:使用jquery里面的一个dragsort插件。
遇到的问题(bug):
1. 使用dragsort后,导致上传图片模块也能够拖动,这对用户是不友好的;
2. 点击开始上传按钮,图片会按照一开始选择进来的顺序上传,不会按照用户拖动交换图片位置以后的顺序上传;
jquery插件之dragsort使用心得_第1张图片
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);
        }

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

你可能感兴趣的:(jquery插件之dragsort使用心得)