位置: 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(完美替身好看吗)

  • iPhone如何设置辅助触控功能(iphone辅助怎么设置)

    iPhone如何设置辅助触控功能(iphone辅助怎么设置)

  • 微信怎么把聊天记录发给别人所有的(微信怎么把聊天记录导入新手机)

    微信怎么把聊天记录发给别人所有的(微信怎么把聊天记录导入新手机)

  • 小米烧屏了保修吗(小米烧屏了保修多久)

    小米烧屏了保修吗(小米烧屏了保修多久)

  • 电脑待机黑屏按什么键恢复(电脑待机黑屏按什么键恢复亮屏设置)

    电脑待机黑屏按什么键恢复(电脑待机黑屏按什么键恢复亮屏设置)

  • 抖音怎么设置可以让别人保存(抖音怎么设置可以微信支付)

    抖音怎么设置可以让别人保存(抖音怎么设置可以微信支付)

  • 优步与滴滴的区别(优步与滴滴的区别在哪里)

    优步与滴滴的区别(优步与滴滴的区别在哪里)

  • 华为moaaloo是什么型号(华为moa—aloo)

    华为moaaloo是什么型号(华为moa—aloo)

  • 电子面单信息错误导致错发是什么意思(电子面单信息错误怎么改)

    电子面单信息错误导致错发是什么意思(电子面单信息错误怎么改)

  • 正在撤销对计算机所做的更改要等多久(正在撤销对计算机更改要多久)

    正在撤销对计算机所做的更改要等多久(正在撤销对计算机更改要多久)

  • 如何不加微信看朋友圈(如何不加微信看电影)

    如何不加微信看朋友圈(如何不加微信看电影)

  • 华为截屏长图怎么弄(华为截屏长图怎么弄得更清晰)

    华为截屏长图怎么弄(华为截屏长图怎么弄得更清晰)

  • 苹果面容坏了可以修吗(苹果面容坏了可以抵扣吗?)

    苹果面容坏了可以修吗(苹果面容坏了可以抵扣吗?)

  • 手机信号灰色且无信号(手机信号是灰色的)

    手机信号灰色且无信号(手机信号是灰色的)

  • 华为mate30几倍变焦(华为mate3030倍变焦模糊加镜头解决)

    华为mate30几倍变焦(华为mate3030倍变焦模糊加镜头解决)

  • 哈罗顺风车一天可以接多少订单(哈罗顺风车一天跑多少钱)

    哈罗顺风车一天可以接多少订单(哈罗顺风车一天跑多少钱)

  • 苹果11por运行内存是多少(苹果11pro内存运行)

    苹果11por运行内存是多少(苹果11pro内存运行)

  • 闲鱼永久禁言能恢复吗(闲鱼永久禁言还能交易吗)

    闲鱼永久禁言能恢复吗(闲鱼永久禁言还能交易吗)

  • 小米169和199台灯区别(小米台灯79和179)

    小米169和199台灯区别(小米台灯79和179)

  • 蚂蚁森林大树多久养成(蚂蚁森林树有多大)

    蚂蚁森林大树多久养成(蚂蚁森林树有多大)

  • 怎么取消点赞(怎么取消点赞过的视频号)

    怎么取消点赞(怎么取消点赞过的视频号)

  • iwown手环怎么调时间(iwown手环怎么调亮度)

    iwown手环怎么调时间(iwown手环怎么调亮度)

  • 华为手机怎么投影(华为手机怎么投屏到电视上播放视频)

    华为手机怎么投影(华为手机怎么投屏到电视上播放视频)

  • 过高速etc怎么使用(高速过etc怎么开发票)

    过高速etc怎么使用(高速过etc怎么开发票)

  • qq好友热播怎么关(qq好友热播怎么看关注的人)

    qq好友热播怎么关(qq好友热播怎么看关注的人)

  • cad捕捉设置快捷键(cad2012捕捉设置快捷键)

    cad捕捉设置快捷键(cad2012捕捉设置快捷键)

  • 如何从零开始制作一个linux iso镜像(图文教程)(如何从零开始制作地下偶像)

    如何从零开始制作一个linux iso镜像(图文教程)(如何从零开始制作地下偶像)

  • Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法(windows7给c盘扩容)

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法(windows7给c盘扩容)

  • Escarpment Trail in Porcupine Mountains Wilderness State Park, Michigan (© Pat & Chuck Blackley/Alamy)

    Escarpment Trail in Porcupine Mountains Wilderness State Park, Michigan (© Pat & Chuck Blackley/Alamy)

  • phpcms如何修改版权(phpstudy修改php版本)

    phpcms如何修改版权(phpstudy修改php版本)

  • 申报未抄税
  • 企业销售不动产增值税税率
  • 待报解预算收入计入什么科目
  • 个人承包工程如何避税
  • 附加税减半征收会计分录
  • 生产单位车间设计费应该计入什么科目?
  • 会员费怎么记账
  • 公司买包包送员工入可以计入什么科目?
  • 增值税发票小规模2023
  • 企业季度所得税资产总额怎么填
  • 加油发票的票据抬头是个人,这样可报销吗?
  • 关联交易类型有哪些
  • 只有进项没有销项怎么报税
  • 店铺拆除费用
  • 生产成本中材料款年末要全部结转吗
  • 专用发票超过360天作废
  • 利息资本化的时点
  • 工资薪金支出账载金额小于实际发生额
  • 新版edge浏览器如何恢复设置
  • win7系统中如何让未响应的程序继续运行
  • 交易性金融资产是什么意思
  • 银行自动扣费用是什么
  • 资产置换会计准则
  • 建筑业增值税会计核算是哪门课的内容
  • navapp.exe - navapp是什么进程文件 作用是什么
  • 扫码分享到微信
  • php7异常处理
  • PHP:imagecolormatch()的用法_GD库图像处理函数
  • 应收账款逾期的危险信号
  • 上级拨付的债券会计分录
  • Joomla简单判断用户是否登录的方法
  • 停车费报销怎么做账
  • 2023值得推荐的手机
  • 机器学习分类算法之XGBoost(集成学习算法)
  • MYSQL数据库设计与应用第二版
  • 公司车辆保险费要交印花税吗
  • 融资租赁手续费一次性还是摊销
  • 其他收益算主营业务收入吗
  • 银行托管账户的规定有哪些
  • 房地产企业政府返还款
  • 未开票收入缴纳增值税怎么冲减补开发票
  • 营业税改增值税时间
  • 进项税额转出是借方科目还是贷方科目
  • 一般纳税人不得领用专票的情形
  • 财付通支付备付金
  • 公司交的物业费计入什么会计科目
  • 年终零余额账户额度和收入相等吗
  • 软件产品销售合同范本
  • 股东往来款算投资款吗
  • 税费的审计
  • 购买金税盘的费用会计分录
  • 发票缴销了还能恢复吗
  • 进项税额转出可以在所得税前扣除吗
  • 其他应收款如何计提坏账准备
  • 会计错账的更正方法及适用范围
  • mysql union unionall
  • Linux下Mysql5.7.19卸载方法
  • xp怎么删除电脑系统
  • xp系统安装版合集
  • sgrmbroker.exe是什么进程
  • ubuntu 18.04怎么用
  • 笔记本不支持win8
  • mac使用命令行
  • 如何判断win7
  • win7系统如何修改ip地址
  • win8电脑路由器网络受限怎么办
  • jquery ztree实现右键收藏功能
  • undefined reference to pthread
  • css怎么控制图片位置
  • jquery提交form表单数据
  • matlab中sort函数的作用
  • 用js获取地址栏url参数的方法
  • unity hud优化
  • bootstrap和css的关系
  • jquery去重复数组
  • 网上税务营业厅
  • 浙江税务打不开,提示新版本
  • 空置房物业收费标准
  • 广州2021社保费
  • 12366几点上班人工服务
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设