位置: IT常识 - 正文

vue3使用拖拽组件draggable.next的使用教程【保姆级】(vue3 拖拽)

编辑:rootadmin
vue3使用拖拽组件draggable.next的使用教程【保姆级】

推荐整理分享vue3使用拖拽组件draggable.next的使用教程【保姆级】(vue3 拖拽),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue自定义拖拽指令,vuejs拖拽,vuejs拖拽,vue拖拽组件生成页面代码,vue 拖拉拽,vue拖拽组件生成页面代码,vuejs拖拽,vue实现拖拽组件,内容如对您有帮助,希望把文章链接给更多的朋友!

环境:vue3+setup语法

首先放官方文档的链接:

中文版本: https://www.itxst.com/vue-draggable-next/tutorial.html (民间翻译)

英文版本:https://github.com/SortableJS/vue.draggable.next

因为自己写的过程中,官方文档和网上的资料都非常不明,使用版本各不相同,极易踩坑,自己写完后就总结一下,与诸位共勉。

(一)首先,明确需求:

做一个可重复拖拽生成的表格设计器,效果图如下:

(二)搭一个基本的可互相拖拽的框架(1)在终端使用npm命令下载插件npm i -S vuedraggable@next//导入import draggable from 'vuedraggable'(2)拖拽插件大致可分为两种使用方式——分组拖拽与单组拖拽

单组拖拽为只有一组数据,而拖拽是交换此组数据内部的位置,如下图所示:

而互相拖拽是有两组数据,两组数据可以各自内部换顺序,可以相互拖拽到对方的数组中。

本文需求只用到了互相拖拽,互相拖拽的代码形式如下:

//需要克隆的数据,A组<draggable :list="dragList" ghost-class="ghost" :force-fallback="true" :group="{ name: 'list', pull: 'clone' }":sort="false" itemKey="id"><template #item="{ element }"><div class="item move"><label class="move">{{ element.name }}</label></div></template></draggable>//拖拽的结果,B组<draggable :list="widgetList" ghost-class="ghost" itemKey="id" :force-fallback="true" group="list" :fallback-class="true":fallback-on-body="true"><template #item="{ element }"><div class="item move"><label class="move">{{ element.name }}</label></div></template></draggable><script lang="ts" setup>import draggable from 'vuedraggable'interface type {name: string,id: number}const dragList: type[] = reactive<type[]>([{ name: "单行文本", id: 1 },{ name: "多行文本", id: 2 },{ name: "计数器", id: 3 },{ name: "单选框组", id: 4 },])const widgetList = reactive<type[]>([{ name: "多行文本", id: 2 },])

draggable的一些常用的属性我作了整理,方便根据不同的需求取用,可核对表格填写:

属性说明类型是否必填

group

如果是分组拖拽,可通过设置group的name来实现分类。

pull属性代表拖出,put为拖入,

:group="{ name :'list',pull : true, put: false }"

代表这个分组与其他name为list的分组可实现分组拖拽,此分组允许拖出,不允许拖入,pull为‘clone’则代表clone模式,pull与put可写可不写,默认值都为true

Object / string

(分组拖拽时必填)

list

绑定的数据

Array

sort

是否开启排序功能,默认为true,如果设置为false,它所在组无法排序

Boolean

force-fallback

默认false,忽略HTML5的拖拽行为,因为h5里有个属性也是可以拖动,你要自定义ghostClass chosenClass dragClass样式时,建议forceFallback设置为true

Boolean

(设置ghost-class或drag-class时为必填)

vue3使用拖拽组件draggable.next的使用教程【保姆级】(vue3 拖拽)

ghost-class

:ghostClass=“ghostClass” 设置拖动元素的占位符类名,可以将拖动时的元素设置为不同的样式。自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true。

String

disabled

是否禁用,默认false

Boolean

drag-class

:drag-class="dragClass"拖动元素的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true

Boolean

item-key

每个元素唯一的标识,建议使用id

itemKey='id',注意,此处无需写成变量形式

String

(不填也能运行,但控制台会报警告)

到现在为止,这已经是个互相拖拽的组件了。

(3)如果发现自己写的组件 不能进行拖拽,或者网页上不显示组件 ,或者出现红色报错信息,则检查以下注意点 :

group中name是否一致,group为变量,需要 :group =‘{name:'' }’的形式

AB组的元素要实现互相拖拽,元素的数据结构必须完全一致,如果不放心,可以使用interface来定义一个类型诸如 interface itemType { name : string , id:number }

AB组绑定的数组是否为响应式,如非响应式,会发生拖拽成功,但不能及时响应的情况,可以用这个方法自检-->先进行拖拽,然后在代码的html部分随便加个东西,然后保存,观察网页上是否显示刚才拖拽的内容,如果出现,那就是数组非响应式的问题。

改正:const arr = reactive<itemType[]>([ { name : 'name ' , id : 1 } ])

在新版vue3中,item插槽是必写的部分,不能使用v-for循环替代。

<draggable>    <template #item="{ element }"><div class="item move"><label class="move">{{ element.name }}</label></div></template></draggable>

item插槽中只允许有一个子元素,此处有个坑,就是如果有两个子元素,但注释掉了一个,也会报错。哪怕实际上这只有一个子元素。

//正确的<template #item="{ element }"><div class="item move"><label class="move">{{ element.name }}</label></div></template>//会报错的情况!<template #item="{ element }">    <!-- <div class="class"></div> --><div class="item move"><label class="move">{{ element.name }}</label></div></template>

到此为止,已经实现拖拽成功。有些人可能会碰到这个问题————如果B组为空,向B组内拖第一个组件的时候,会出现拖拽困难,只能往拖拽区的最顶部拖才能成功 / 根本无法拖拽成功。

原因:因为B组的draggable渲染时为一个高度为auto的div,当前组如果为空,高度也为0,可拖拽区就会变得很小或不存在。

解决方法:为B组的draggable设计高度,具体代码为添加类名,在css中设置

<draggable :list="widgetList" ghost-class="ghost" itemKey="id" :force-fallback="true" group="list" :fallback-class="true":fallback-on-body="true" class="drag-content"><template #item="{ element }"><div class="item move"><label class="move">{{ element.name }}</label></div></template></draggable><style lang="less" scoped>    .drag-content {        height:500px; //建议是外层嵌套一层div,div固定高,此处再设为100%    }</style>(三)将拖拽后的内容替换为element组件/其它指定内容

我们发现,拖拽后显示的内容可自由定义,在B组的draggable中设置

此时,我们需要完善dragList的数组结构,来映射拖拽后所形成的不同组件

(在组件少的情况下可以这么做)

interface itemType {name: string,id: number,  element:string}const dragList: type[] = reactive<type[]>([{ name: "单行文本", id: 1, element: 'Input' },{ name: "多行文本", id: 2, element: 'Textarea' },{ name: "计数器", id: 3, element: 'InputNumber' },{ name: "单选框组", id: 4, element: 'Radio' },])const widgetList = reactive<type[]>([])// A组<draggable :list="dragList" ghost-class="ghost" :force-fallback="true" :group="{ name: 'list', pull: 'clone' }":sort="false" itemKey="id"><template #item="{ element }"><div class="item move"><label class="move">{{ element.name }}</label></div></template></draggable>// B组<draggable :list="widgetList" ghost-class="ghost" itemKey="id" :force-fallback="true" group="list":fallback-class="true" :fallback-on-body="true" class="drag-content"><template #item="{ element }"><div class="item move"><label class="move title">{{ element.name }}</label><div> <el-input v-model="input" placeholder="Please input" v-if="element.element === 'input'" /></div><div><el-input v-model="textarea" :rows="2" type="textarea" placeholder="Please input"v-if="element.element === 'textarea'" /> </div></div></template></draggable>

点击控件拖过去,就可以实现如下的效果,如果不想要标题,可以把label部分去掉,其他控件如法炮制即可:

在组件数量少的时候,可以这么做,但数量多时,建议使用component标签来映射

(1)先更改一下文件的结构 (2)写一个公共的函数去返回当前widgets文件夹下的所有文件// getWidget.tsconst gets = {} as anyconst modules = import.meta.glob('./*.vue', {eager:true})for (let each in modules) {const name = (modules[each] as any).default.__namegets[name] = (modules[each] as any).default}console.log(gets);export default gets

也可使用globEager方法,编译器会报错:函数已经弃用,不过不影响使用。

(3)分别把每个组件的部分写好// Input.vue<template><div><el-input v-model="input" placeholder="Please input" /></div></template><script lang="ts" setup>const input=ref('')</script><style lang="less" scoped></style>(4)使用component标签映射<draggable :list="widgetList" ghost-class="ghost" itemKey="id" :force-fallback="true" group="list":fallback-class="true" :fallback-on-body="true" class="drag-content"><template #item="{ element }"><div class="item move"><label class="move title">{{ element.name }}</label><div><component :is="getWidget(element.element)"></component></div></div></template></draggable>// 使用函数映射<script lang="ts" setup>import draggable from 'vuedraggable'//要注意导入import getName from './widgets/getWidget'const getWidget = (name: string) => {//写的时候,组件的起名一定要与dragList中的element名字一模一样,不然会映射不上return getName[name]}(5)最终效果

成功实现!

本文链接地址:https://www.jiuchutong.com/zhishi/298669.html 转载请保留说明!

上一篇:Vue3安装配置、开发环境搭建(组件安装卸载)(图文详细)(vue3安装配置)

下一篇:【JavaScript数据结构与算法】字符串类(反转字符串中的单词)(javascript数据类型)

  • 手机恢复出厂设置后怎么还原数据(手机恢复出厂设置)(手机恢复出厂设置后系统会降级吗)

    手机恢复出厂设置后怎么还原数据(手机恢复出厂设置)(手机恢复出厂设置后系统会降级吗)

  • 鲁大师是什么软件(鲁大师是什么软件 视频)

    鲁大师是什么软件(鲁大师是什么软件 视频)

  • 屏幕保护的密码是需要分大小写的吗(屏幕保护的密码是需要分大小写的(2分))

    屏幕保护的密码是需要分大小写的吗(屏幕保护的密码是需要分大小写的(2分))

  • 微信改手机号要等多久(微信改手机号要等几天)

    微信改手机号要等多久(微信改手机号要等几天)

  • 华为手机怎么投屏到海信电视上(华为手机怎么投屏到汽车中控屏)

    华为手机怎么投屏到海信电视上(华为手机怎么投屏到汽车中控屏)

  • 微信聊天记录误删怎么找回(微信聊天记录误删)

    微信聊天记录误删怎么找回(微信聊天记录误删)

  • 剪映导出的视频模糊(剪映导出的视频是mp4格式吗)

    剪映导出的视频模糊(剪映导出的视频是mp4格式吗)

  • 抖音箭头数字什么意思(抖音箭头数字1什么意思)

    抖音箭头数字什么意思(抖音箭头数字1什么意思)

  • P站全称叫什么(p站全称叫什么怎么进)

    P站全称叫什么(p站全称叫什么怎么进)

  • 投影仪侧投和直投区别(投影仪侧投和直投怎么放)

    投影仪侧投和直投区别(投影仪侧投和直投怎么放)

  • 淘宝退款的上门取件是什么意思(淘宝退款上门取件和自行寄回哪个退款快)

    淘宝退款的上门取件是什么意思(淘宝退款上门取件和自行寄回哪个退款快)

  • qq自动回复为什么有时候不回复(qq自动回复为什么突然不回复了)

    qq自动回复为什么有时候不回复(qq自动回复为什么突然不回复了)

  • cd和dvd光盘是否通用(cd-r光盘和dvd-r)

    cd和dvd光盘是否通用(cd-r光盘和dvd-r)

  • OPPO k5忘记解锁密码怎么办(oppok5密码锁忘了怎么解)

    OPPO k5忘记解锁密码怎么办(oppok5密码锁忘了怎么解)

  • 键盘灯开关是哪个键(键盘灯光开关在哪)

    键盘灯开关是哪个键(键盘灯光开关在哪)

  • 微信5分以上视频怎么发(微信五分多钟的视频怎么发)

    微信5分以上视频怎么发(微信五分多钟的视频怎么发)

  • 抖音怎么找回注销的账号(抖音怎么找回注册时间)

    抖音怎么找回注销的账号(抖音怎么找回注册时间)

  • 12123支付平台响应为空(12123支付平台响应异常)

    12123支付平台响应为空(12123支付平台响应异常)

  • oppor17支持多少w闪充(oppor17支持多少W快充吗)

    oppor17支持多少w闪充(oppor17支持多少W快充吗)

  • 苹果6s怎么打开多任务后台管理(苹果6s怎么打开控制中心)

    苹果6s怎么打开多任务后台管理(苹果6s怎么打开控制中心)

  • 怎样设置PPT中文本对齐(怎样设置PPT中文字出来的顺序)

    怎样设置PPT中文本对齐(怎样设置PPT中文字出来的顺序)

  • 抖音对方把我拉黑了还能刷到我吗(抖音对方把我拉黑了我看他主页他访客有我记录吗)

    抖音对方把我拉黑了还能刷到我吗(抖音对方把我拉黑了我看他主页他访客有我记录吗)

  • 会员怎么分享给别人(会员怎么分享给别人用扫码付款)

    会员怎么分享给别人(会员怎么分享给别人用扫码付款)

  • sistray.exe - sistray是什么进程 有什么用

    sistray.exe - sistray是什么进程 有什么用

  • 【YOLOV5-6.x讲解】数据增强方式介绍+代码实现(yolov5map)

    【YOLOV5-6.x讲解】数据增强方式介绍+代码实现(yolov5map)

  • 项目异地预缴附加税会计分录是?
  • 申报表货物及劳务是什么
  • 财务费用和应付利息怎么算
  • 大行建筑有限公司分公司
  • 增值税申报表中应税货物销售额
  • 固定资产升值可以入账吗?
  • 应付账款超过三年未付
  • 预计销售收入增长是什么意思
  • 加计抵减的税额多长时间
  • 合伙企业有一般账户吗
  • 一般纳税人的税率是多少个点
  • 五金销售公司
  • 网络团购的类型
  • 对方把发票丢了可以重开吗
  • 行政单位明细账包括哪些
  • 汇算清缴期间费用社保填哪里
  • 拆迁房视同销售成本可以抵减吗?
  • 关于半年度净资产的公告
  • 工程设计企业符合增值税抵减政策吗
  • 无形资产后续支出计入什么科目
  • 税控盘年费去哪里交
  • 进项税额转出是什么意思
  • 收到免税发票会影响税负吗
  • 发票章盖住备注烂备注的日期,看不清
  • 建筑行业外经证办理步骤
  • 公司房产税如何计算器
  • 企业增资还需要增资账户么
  • 支出税费
  • windows7iis安装
  • 行政单位年底结账怎么算
  • 资产减值损失会影响营业利润吗
  • frameworkservic.exe是什么进程 有什么作用 frameworkservic进程查询
  • schost.exe - schost是什么进程 有什么用
  • 查补以前年度所得税如何申报
  • 前端获取post请求返回数据
  • PHP:oci_bind_array_by_name()的用法_Oracle函数
  • 企业所得税的纳税人包括哪些
  • 消费税的会计分录怎么写
  • 个人通讯费可以税前扣除吗
  • php preg_quote
  • laravel create
  • 客户要回扣
  • 可行性研究合同印花税
  • 房地产股权转让涉及哪些税费
  • kafka gui
  • 非限定性净资产包括哪些科目
  • 高新技术产业企业认定
  • 物流企业财务流程
  • 法人转钱入公户要交税吗
  • 现金折扣属于什么
  • sql2005安装步骤
  • 一般纳税人劳务费税率是多少2023
  • 运输业开发票
  • 未分配利润转增股本要交税吗怎么交
  • 外贸公司进口关税增值税的帐务处理流程
  • 工程咨询服务发展指导意见坚持市场培优的原则
  • 收到货款比开票少怎么办
  • 土地契税税率计算公式
  • 网吧的收入怎么做账
  • 累计减免所得税
  • 餐饮打包盒 标准
  • 滞留专票会有什么风险
  • win7注册表有什么用
  • u盘重装系统电脑
  • ubuntu屏幕突然变大
  • bzc.exe是什么
  • windows10指纹用不了
  • w8系统怎么用
  • react native 应用
  • 网页使用的字体中最具可读性.最易浏览的是
  • 显示网络配置的命令
  • unity中ngui
  • 国税总局201439号公告
  • 税务案件移送案件的法律条款
  • 山东省国税地税体制改革
  • 怎样纳税申报和缴纳
  • 江苏电子税务局网站官网
  • 支付宝怎么样开通刷脸支付
  • 单位没有缴纳个人医保
  • 自然人电子税务局(扣缴端)怎么添加公司
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设