一分钟搞定前台拖拽效果

作者 : 开心源码 本文共2392个字,预计阅读时间需要6分钟 发布时间: 2022-05-13 共135人阅读

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

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

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 一分钟搞定前台拖拽效果

发表回复