最近项目中有功能涉及到拖拽效果，使用vuedraggable组件中遇到的问题及方法做了相关的记录，与大家分享。
一、实现效果
左侧列表拖拽到右侧，展现出相应的类型
以下为实现效果图：
二、安装
npm i -S vuedraggable
三、页面示例代码及相关配置说明
<template> <div class="wrap"> <!-- left --> <!-- 组件调用使用v-model或直接绑定数组 --> <draggable :list="infoLabels" :options="{group:{name: 'dragRight',pull:'clone'},disabled: isDragDisabled,sort:true}" @start="startDrag" class="dragArea-left"> <div v-for="(item,index) in infoLabels" :key="index" class="labelItem"> <p><span>{{item.label}}</span></p> </div> </draggable> <!-- right --> <!-- 'dragRight'和左侧组件中的group中name的值保持一致 --> <draggable :list="fieldList" :options="{group:'dragRight', disabled: false,sort:true}" @add="onAddFun($event)" class="dragArea-right"> <div v-for="(item,index) in fieldList" :key="index" class="labelItem"> <el-input v-if="item.type==1"></el-input> <div v-if="item.type==2"> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-radio> </div> <div v-if="item.type==3"> <el-checkbox v-model="checked">备选项</el-checkbox> </div> <el-date-picker v-if="item.type==4" v-model="value1" type="date" placeholder="选择日期"> </el-date-picker> </div> </draggable> </div></template>
在配置项options中设置相应的属性
:options="{group:{name: 'dragRight',pull:'clone'},disabled: isDragDisabled,sort:true}":options="{group:'dragRight', disabled: false,sort:true}"
group
实现两个列表的拖拽，运用了vuedraggable拖拽克隆方法，给group的name相同的值，建立联系
pull：'clone'
给拖拽的列表配置这个属性之后，拖拽其中的元素，该元素还保留
disabled // 动态绑定是否禁用
sort：true/false // 是否拖拽后排序
filter: '.undraggable' // 拥有该类名的元素不可拖拽
draggable: '.item-drag' // 拥有该类名的元素可拖拽
animation: 150, // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
四、方法
大家在入门学习前端的过程当中有遇见任何关于学习，行业方面的问题，都可以申请加入我的前端学习扣扣裙，282549184。缺乏相关的基础教程也可以直接来找我要，我这里整理了一套最新的前端基础教程，学习前端的这个过程当中我也收集了很多前端学习手册，面试题，开发工具，PDF文档书籍教程，可以直接分享给你们。
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) } }</script>
（1）开始
start
开始拖拽执行的方法
end
拖拽结束执行的方法
add
拖拽元素加入新的列表后执行的方法
上述方法输出第一个参数，可以拿到当前拖动对象的对应属性：
to // 当前被拖动元素的列表
from // 将要移动到的列表
oldIndex// 拖动之前所在列表的索引值；运用在想要获取拖动元素的数据中，可以通过索引来获取到
newIndex// 拖动之后在新列表的索引值，在新列表之后想要选中，可使用newIndex
主要实现过程是在拖动到右侧之后，通过拿到被拖拽元素的类型，push到右侧列表中，并选中该元素
（2）应用场景中，有要求列表中部分元素不可拖拽，组件中有两种方法可以实现
filter: '.undraggable'
draggable: '.item-drag'
两种方法都可使对应类名的元素不可拖拽，但不同之处在于除本身之外的其他同级元素。
使用filter，类名为undraggable的元素本身不可拖拽，但其他元素可在其前后插入改变排序。
使用draggable，其他元素不可前后插入只会改变除此之外的排序。
在使用组件的过程中，查阅文档了解配置项及提供的方法，灵活运用到相应场景中。