一分钟搞定前端拖拽效果

最近项目中有功能涉及到拖拽效果，使用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，其他元素不可前后插入只会改变除此之外的排序。

在使用组件的过程中，查阅文档了解配置项及提供的方法，灵活运用到相应场景中。