vuedraggable
最近在做PC项目,一个比较复杂的后台管理项目,需求有个效果是拖拽,因此接触了vuedraggable,以下总结一下。
其实最开始用的是sortable,但是有些问题,因此后来改用了vuedraggable,它也是基于sortable的。
1、简单用法
用draggable标签包住想要实现拖拽效果的范围,并且设置v-model的值与里边的循环数据一致即可
2、多个数组之间的拖拽
同样,将想拖拽内容用draggable标签包裹,并设置属性值group,一样的group代表为一个分组,可以彼此之间拖拽
主要用的三个事件,start、end,用@方式绑定
:move用这个方式绑定,并且只有一个参数evt
两边有两个主要的对象:draggedContext 被拖拽元素的相关参数对象
index,element,futureIndex
relatedContext 被拖入区域的相关参数对象
index,element,list,components
更多的参数配置查看:https://blog.csdn.net/zjiang1994/article/details/79809687
tips:
问题:1)如果move方法报错,升一下draggable的版本,我的版本是2.21.0
2)这种用move中的参数判断最终拖动位置的方法,在目标值为空的时候,会无法判断,可以添加一条假数据,拖动后再讲其删除
3)还有一个很魔幻的问题,在我打开浏览器开发者模式时,拖动不生效,关闭后才生效。
所以调试的时候,如果代码没问题但是拖动不生效,可以尝试将开发者模式关闭后再查看是否生效