一分钟搞定前台拖拽效果

最近项目中有功能涉及到拖拽效果，使用vuedraggable组件中遇到的问题及方法做了相关的记录，与大家分享。

一、实现效果

左侧列表拖拽到右侧，展示出相应的类型

以下为实现效果图：

二、安装

npm i -S vuedraggable

三、页面示例代码及相关配置说明

<template> <div class="wrap">   <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>   <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，其余元素不可前后插入只会改变除此之外的排序。

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