最近项目中有功能涉及到拖拽效果,使用vuedraggable组件中遇到的问题及方法做了相关的记录,与大家分享。
一、实现效果
左侧列表拖拽到右侧,展现出相应的类型
以下为实现效果图:
二、安装
npm i -S vuedraggable
三、页面示例代码及相关配置说明
{}
备选项 备选项
备选项
前端学习qun
前面二八二中间549后面184
在配置项options中设置相应的属性
:options=",disabled: isDragDisabled,sort:true}":options=""
group
实现两个列表的拖拽,运用了vuedraggable拖拽克隆方法,给group的name相同的值,建立联系
pull:'clone'
给拖拽的列表配置这个属性之后,拖拽其中的元素,该元素还保留
disabled // 动态绑定是否禁用
sort:true/false // 是否拖拽后排序
filter: '.undraggable' // 拥有该类名的元素不可拖拽
draggable: '.item-drag' // 拥有该类名的元素可拖拽
animation: 150, // ms, 动画速度运动项目排序时,' 0 ' -没有动画。
四、方法
methods: { startDrag () { this.isDragDisabled = true }, // 加入右侧列表 onAddFun (ev) { console.log(ev.oldIndex) this.isDragDisabled = false let typeValue = this.infoLabels[ev.oldIndex].value let obj = { type: typeValue } this.fieldList.push(obj) } }
(1)开始
start
开始拖拽执行的方法
end
拖拽结束执行的方法
add
拖拽元素加入新的列表后执行的方法
上述方法输出第一个参数,可以拿到当前拖动对象的对应属性:
to // 当前被拖动元素的列表
from // 将要移动到的列表
oldIndex// 拖动之前所在列表的索引值;运用在想要获取拖动元素的数据中,可以通过索引来获取到
newIndex// 拖动之后在新列表的索引值,在新列表之后想要选中,可使用newIndex
主要实现过程是在拖动到右侧之后,通过拿到被拖拽元素的类型,push到右侧列表中,并选中该元素
(2)应用场景中,有要求列表中部分元素不可拖拽,组件中有两种方法可以实现
filter: '.undraggable'
draggable: '.item-drag'
两种方法都可使对应类名的元素不可拖拽,但不同之处在于除本身之外的其他同级元素。
使用filter,类名为undraggable的元素本身不可拖拽,但其他元素可在其前后插入改变排序。
使用draggable,其他元素不可前后插入只会改变除此之外的排序。
在使用组件的过程中,查阅文档了解配置项及提供的方法,灵活运用到相应场景中。
领取专属 10元无门槛券
私享最新 技术干货