位置: IT常识 - 正文

vue使用vuedraggable拖拽组件,进行组件生成(vue使用jquery)

编辑:rootadmin
vue使用vuedraggable拖拽组件,进行组件生成

推荐整理分享vue使用vuedraggable拖拽组件,进行组件生成(vue使用jquery),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue使用计算属性声明在什么配置项中,vue使用jquery,Vue使用虚拟DOM的特点,vue使用什么软件开发,vue使用vuedraggable可拖拽区域,vue使用vuedraggable可拖拽区域,vue使用jquery,vue使用jquery,内容如对您有帮助,希望把文章链接给更多的朋友!

最近写项目使用到了vuedraggable这个插件,进行组件生成,由于第一次使用,就上网搜相关文章,结果网上基本上都是上下拖拽之类的,没有找到自己想要的结果,然后就根据自己的需求结合相关文档进行了开发

开发完后大概结果视频如下:

vuedraggable拖拽生成组件

静态效果如下:

 第一步:下载依赖:

npm i -S vuedraggable

第二步:在项目中引入:

import draggable from "vuedraggable";vue使用vuedraggable拖拽组件,进行组件生成(vue使用jquery)

第三步查看相关属性和方法:

属性:

 事件:

 属性和事件使用方法请详看 官网:

中文(国人翻译,可能更新不及时):vue.draggable中文文档 - itxst.com

英文:https://www.itxst.com/vue-draggable/tutorial.html

第四步:在代码里使用 html

<template><div><div class=""> <draggable v-model="applyList" :group="{ name: 'piece', pull: 'clone', put: true }" animation="100" :sort="false" :clone="addComponent"//左边应用组数据 > <div class="employ" v-for="item in applyList" :key="item.id"> <span class="nr">{{ item.name }}</span> </div> </draggable> </div><div class=""> <draggable v-model="applyList" :group="{ name: 'piece', pull: 'clone', put: true }" animation="100" :sort="false" :clone="addComponent"//左边应用数据 > <div class="employ" v-for="item in applyList" :key="item.id"> <span class="nr">{{ item.name }}</span> </div> </draggable> </div> <div> <draggable v-model="onList" group="piece" animation="100">//右边空数组 <transition-group :style="style"> <div class="myEmploy" v-for="item in onList" :key="item.id"> <span class="zjNr" >{{ item.name }} <div class="ddd"> <draggable v-model="item.myList"//父级空数组 :group="{ name: 'theChild', pull: 'clone', }" animation="100" :clone="cloneComponent" :sort="true" > <transition-group :style="style"> <!-- 子应用 --> <div class="caTion" :key="item.id"> <div class="suBAppLicaTion" v-for="(it, idx) in item.myList"//子级空数组 :key="idx" > <i class="el-icon-circle-close myDelete" @click="onDelete(idx)" ></i> <img :src="it.url" alt="" /> <span class="ziNr">{{ it.name }}</span> </div> </div> </transition-group> </draggable> </div> </span> </div> </transition-group> </draggable> 从左侧拖入或点选组件进行应用组合 </div></div></template>

js:

<script>import draggable from "vuedraggable";export default { components: { draggable, }, data() { return { applyList: [ { name: "前端小脑虎", id: 1, }, { name: "关注我,不迷路", id: 2, }, { name: "vue问题大全", id: 3, }, { name: "欢迎来到深圳", id: 4, }, ], useList: [ { url: require("../../assets/images/profile.jpg"), name: "学习呀", id: 5, }, { url: require("../../assets/images/profile.jpg"), name: "前端耐斯", id: 6, }, { url: require("../../assets/images/profile.jpg"), name: "前端小脑虎", id: 7, }, { url: require("../../assets/images/profile.jpg"), name: "深圳欢迎你", id: 8, }, ], list: [ { url: require("../../assets/images/profile.jpg"), name: "互连网+", id: 1, }, { url: require("../../assets/images/profile.jpg"), name: "直装直提", id: 2, }, ], onList: [], myList: [], style: "min-height:120px;display: block;", utilize: false, AppGroup: false, }; }, methods: { // 删除 onDelete(idx) { this.onList.forEach((item) => { const id = item.myList[idx].id; item.myList.splice(idx, 1); console.log("item", item.myList); }); }, // 子应用添加 newSubAppLicaTion(item) { const clone = this.cloneComponent(item); this.onList.forEach((item) => { if (item.myList) { item.myList.push(clone); } else { item.myList = [clone]; } }); }, // 应用组添加 addComponent(item) { let exist = false; this.onList.forEach((it) => { //遍历onList,判断是否当前拖拽的应用组内容是否存在,存在就赋值exist为true并return if (it.id == item.id) { exist = true; return; } }); if (exist) { //根据exist来判断,为true就return,false就push进去 this.$message({ message: "组件里已经有相同的应用组啦,请拖拽其他应用组哦", type: "warning", }); return; } else { const clone = item; this.onList.push({ ...clone, myList: [] }); } }, // 应用复制 cloneComponent(origin) { let exist = false; this.onList.forEach((item) => { item.myList.forEach((it) => { //遍历myList,判断是否当前拖拽的应用内容是否存在,存在就赋值exist为true并return if (it.id == origin.id) { exist = true; return; } }); }); if (exist) { //根据exist来判断,为true就return,false就push进去 this.$message({ message: "组件里已经有相同的应用啦,请拖拽其他应用哦", type: "warning", }); return; } else { const clone = origin; return clone; } }, onEnd() { this.drag = false; }, save() {}, // 编辑 },};</script>

以上就是这个插件在项目中使用的流程 如果有不懂可以私信我

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

上一篇:vue3在运行时路由可以正常跳转,但是页面空白,刷新页面恢复正常[已解决](vue程序运行过程)

下一篇:一款可以完美替代浏览器自带起始页的新标签页插件:Wetab(完美替身好看吗)

  • 一加7t pro和一加7 Pro有什么区别(一加7t和一加7t pro哪个好)

    一加7t pro和一加7 Pro有什么区别(一加7t和一加7t pro哪个好)

  • 优酷怎么取消只看主角(优酷怎么取消只看一个人的片段)

    优酷怎么取消只看主角(优酷怎么取消只看一个人的片段)

  • iphone11镜头保护膜有必要吗(iphone11镜头保护膜)

    iphone11镜头保护膜有必要吗(iphone11镜头保护膜)

  • wps按钮连接是什么意思(wps连接符怎么用)

    wps按钮连接是什么意思(wps连接符怎么用)

  • 小天才可以下载爱奇艺吗(小天才可以下载百度网盘吗)

    小天才可以下载爱奇艺吗(小天才可以下载百度网盘吗)

  • 笔记本电脑个别按键失灵怎么办(笔记本电脑个别数字键打不出数字)

    笔记本电脑个别按键失灵怎么办(笔记本电脑个别数字键打不出数字)

  • 苹果11wifi自动打开(苹果11wifi自动打开怎么回事)

    苹果11wifi自动打开(苹果11wifi自动打开怎么回事)

  • 推特视频怎么保存(推特视频怎么保存快捷指令)

    推特视频怎么保存(推特视频怎么保存快捷指令)

  • 腾讯会议为什么看不见画面(腾讯会议为什么不能用蓝牙耳机)

    腾讯会议为什么看不见画面(腾讯会议为什么不能用蓝牙耳机)

  • 快手可以同时两个手机登录吗(快手能不能弄两个号)

    快手可以同时两个手机登录吗(快手能不能弄两个号)

  • 苹果x电信卡没信号怎么回事(苹果X电信卡没信号打不了电话)

    苹果x电信卡没信号怎么回事(苹果X电信卡没信号打不了电话)

  • vivo的语音助手叫什么 唤醒(怎么打开vivo的语音助手)

    vivo的语音助手叫什么 唤醒(怎么打开vivo的语音助手)

  • 设为私密照片在哪里找(设为私密的照片从哪儿看)

    设为私密照片在哪里找(设为私密的照片从哪儿看)

  • 手机重启忘记密码怎么办(手机重启忘记密码怎么开机)

    手机重启忘记密码怎么办(手机重启忘记密码怎么开机)

  • 新ipad为什么耗电很快(新买的ipad2020为什么耗电很快)

    新ipad为什么耗电很快(新买的ipad2020为什么耗电很快)

  • 爱奇艺付费和vip区别(爱奇艺会员有啥区别)

    爱奇艺付费和vip区别(爱奇艺会员有啥区别)

  • 为什么微信没有漂流瓶了(为什么微信没有对方正在输入的提示)

    为什么微信没有漂流瓶了(为什么微信没有对方正在输入的提示)

  • 高清播放器能播放dvd光盘吗(高清播放器播放图片时被拉伸变形)

    高清播放器能播放dvd光盘吗(高清播放器播放图片时被拉伸变形)

  • 手机qq怎么转发聊天记录(手机QQ怎么转发说说)

    手机qq怎么转发聊天记录(手机QQ怎么转发说说)

  • 淘宝账户保护怎么解除(淘宝的账户保护是什么意思)

    淘宝账户保护怎么解除(淘宝的账户保护是什么意思)

  • 安兔兔如何跑分

    安兔兔如何跑分

  • 怎样把天气预报设置在手机桌面(怎样把天气预报调成原来的)

    怎样把天气预报设置在手机桌面(怎样把天气预报调成原来的)

  • 小米9如何关闭广告(小米9如何关闭开发者模式)

    小米9如何关闭广告(小米9如何关闭开发者模式)

  • 电脑怎么备份系统?(电脑怎么备份系统win7)

    电脑怎么备份系统?(电脑怎么备份系统win7)

  • 高新企业做亏损分析
  • 联通的话费能干吗
  • 中介费要求开发票中介公司不开
  • 其他综合收益税后
  • 私对公转账可以撤回吗
  • 销售商品,提供服务以及从事其他经营活动
  • 建筑企业预收款开具不征税发票为什么要预缴
  • 分公司借款给总公司
  • 生产的产品不合格作废会计分录
  • 企业对外借款是怎么规定的
  • 零工受伤老板怎么赔偿
  • 普通发票发票联丢了
  • 预缴增值税怎么填表
  • 企业注销时留抵税额怎么做账
  • 两年内到期的应付票据
  • 资产总额季初和季末
  • 转正工资差额什么意思
  • 或有资产是指
  • 1697510742
  • 劳务费的现金流量是什么
  • 飞鱼星路由器信号有点差怎么办
  • 硬盘分区的原则主要有哪些
  • 贷款损失准备是什么类科目
  • hiddenalbum是什么文件夹
  • element分页器
  • 购进来的样品怎么账务处理
  • 哪些属于政府补贴
  • 小微企业延缓缴纳
  • vue3.0优点
  • k8s控制器模式
  • zentaophp框架
  • 鲁棒性分析方法
  • 利用php生成静态数据
  • 广告公司纳税人类型
  • 将织梦dedecms转换到wordpress
  • python缺省函数
  • 将购入的原材料用于不动产在建工程
  • 利息收入为什么冲减财务费用
  • 新《准则》适用对象为
  • 报销连号发票的合理解释
  • 个人缴纳公积金的方法
  • 应收贷方余额怎么处理
  • 电子设备折旧残值率
  • 工会经费的开支必须取得发票么
  • 企业间借款利息涉税处理
  • 减资步骤
  • 公司帮别人代缴社保要交税吗
  • 企业会计准则第4号固定资产
  • 年末是否要结转所得税
  • 费用报销流程及制度
  • 存货总账根据什么填列
  • mysql 5.6 从陌生到熟练之_数据库备份恢复的实现方法
  • bitronix 连接 MySQL 出现MySQLSyntaxErrorException 的解决方法
  • 操作系统有哪些
  • 如何使用U盘装机
  • 戴尔dell服务器维修
  • win7关机快捷键设置
  • hidden word什么意思
  • ibm svc是什么意思
  • centos7安装中文包
  • 宽带连接错误628win10
  • linux系统默认启动级别
  • 20150405农历
  • 如何给图像应用css滤镜处理效果
  • jquery动态生成div
  • jquery实现轮播图原理
  • node.js redis
  • shell脚本编程实例
  • 10个JavaScript中易犯小错误
  • javascirpt
  • 冒烟测试和接口测试
  • android入门教程
  • jquery全局方法
  • android studio常用控件
  • 国家税务系统
  • 税务网络安全制度
  • 怎样查手机是否维修过
  • 新开公司交印花税
  • 合肥地税局上班时间
  • 安徽省印花税核定
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设