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

  • 小红书怎么删除笔记(小红书怎么删除仓库中的商品)

    小红书怎么删除笔记(小红书怎么删除仓库中的商品)

  • 华为mate30pro是不是双扬声器

    华为mate30pro是不是双扬声器

  • 苹果怎么取消流量下载限制(苹果怎么取消流量下载超过200)

    苹果怎么取消流量下载限制(苹果怎么取消流量下载超过200)

  • 淘宝人生账单包括退货吗(淘宝人生账单包括哪些)

    淘宝人生账单包括退货吗(淘宝人生账单包括哪些)

  • 老人机的卡怎么取出(老人机的卡怎么安的)

    老人机的卡怎么取出(老人机的卡怎么安的)

  • 拼多多退换货运费谁承担(拼多多退换货运费多少钱)

    拼多多退换货运费谁承担(拼多多退换货运费多少钱)

  • 5g电话卡可以用在4g手机上么(5g电话卡可以用到儿童手表上吗)

    5g电话卡可以用在4g手机上么(5g电话卡可以用到儿童手表上吗)

  • 微信登录设备管理恢复(微信登录设备管理怎么查看)

    微信登录设备管理恢复(微信登录设备管理怎么查看)

  • 启用gpu调试层有必要开吗(启用 gpu 调试层)

    启用gpu调试层有必要开吗(启用 gpu 调试层)

  • 听筒没声音扬声器有(听筒没声音扬声器有声音耳机有声音)

    听筒没声音扬声器有(听筒没声音扬声器有声音耳机有声音)

  • 苹果锁屏去掉手电筒(苹果锁屏去掉手机图标)

    苹果锁屏去掉手电筒(苹果锁屏去掉手机图标)

  • 路由器上光信号闪红灯是什么意思(路由器上光信号不亮是怎么回事)

    路由器上光信号闪红灯是什么意思(路由器上光信号不亮是怎么回事)

  • 苹果5sa1528是什么版(苹果5sa1518是什么版本)

    苹果5sa1528是什么版(苹果5sa1518是什么版本)

  • 苹果小钢炮什么时候上市(iphone小钢炮)

    苹果小钢炮什么时候上市(iphone小钢炮)

  • 华为视频怎么取消自动续费(华为视频怎么取消本地视频)

    华为视频怎么取消自动续费(华为视频怎么取消本地视频)

  • 荣耀20怎么查看后台程序(荣耀20怎么查看电池健康度)

    荣耀20怎么查看后台程序(荣耀20怎么查看电池健康度)

  • wps怎么改成文本格式(wps怎么改文本框底色)

    wps怎么改成文本格式(wps怎么改文本框底色)

  • u盘直接拔出会不会坏(u盘直接拔出会怎么样)

    u盘直接拔出会不会坏(u盘直接拔出会怎么样)

  • oppo呼吸灯怎么改颜色(oppo呼吸灯怎么关)

    oppo呼吸灯怎么改颜色(oppo呼吸灯怎么关)

  • 怎么设置微信投票次数(微信投屏怎么设置方法)

    怎么设置微信投票次数(微信投屏怎么设置方法)

  • 递增序列是升序还是降序(递增序列排序)

    递增序列是升序还是降序(递增序列排序)

  • 蚂蚁森林如何自动收取能量(蚂蚁森林如何自动更新步数)

    蚂蚁森林如何自动收取能量(蚂蚁森林如何自动更新步数)

  • p30pro广角怎么开启(p30pro广角摄像头是哪个)

    p30pro广角怎么开启(p30pro广角摄像头是哪个)

  • 微信里怎样做电子稿(微信里怎样做电子档发给老师)

    微信里怎样做电子稿(微信里怎样做电子档发给老师)

  • 机械师电脑是不是杂牌(机械师电脑不充电)

    机械师电脑是不是杂牌(机械师电脑不充电)

  • vivos1是什么屏幕(vivos1是什么屏幕材质)

    vivos1是什么屏幕(vivos1是什么屏幕材质)

  • win10网络图标启用不了(window10 网络图标)

    win10网络图标启用不了(window10 网络图标)

  • 所得税交错了怎么处理
  • 增值税是什么意思
  • 企业如何代扣代缴个人所得税20%
  • 生日卡片好看吗
  • 仓库出入库账本图片大全
  • 银行日记账必须一年一本吗
  • 加工费暂估入库的会计分录
  • 纳税人财务会计报表报送管理办法
  • 增值税专用发票有效期是多长时间
  • 售后回租利息和租金区别
  • 出售在建工程要交什么税
  • 缴交社保基金会计分录怎么写?
  • 房地产企业代收的取暖费如何纳税
  • 购入农产品的增值税率
  • 支付货款订金入什么科目核算与会计分录
  • 货样广告品出口需要开票吗
  • 公司买了股票怎么做账
  • 居民纳税人具体包括哪些?
  • 承租人转租需要退押金吗
  • 申报更正退税增值税申报表如何反应
  • linux系统怎么查看mac地址
  • 租赁合同维修义务谁承担
  • 在电脑上网页打不开怎么办
  • php中文乱码解决
  • isignup.exe是什么进程 isignup进程查询
  • 增值税中的筹划方法哪些可以应用在消费税中,为什么?
  • 池塘里的水结冰了
  • thinkphp6开发
  • 融资性售后回租承租方为什么不交税
  • 招待费增值税能抵扣吗
  • css垂直导航栏
  • 腾讯一面问什么
  • 深度学习数据集—水果数据集大合集
  • 文件不知道在哪怎么找
  • html5 function
  • 统一社会信用代码多少
  • 微信收款怎么记录怎么删除
  • 单位有残疾人能享受
  • 开增值税发票需要和收款账户名字一致吗
  • 预收账款未发货会计分录
  • 爬虫工程师简介
  • 老板天天吸烟
  • js怎么执行函数
  • mysql存储过程cursor
  • mongodb的安装配置
  • 受托代销商品的手续费计入什么科目
  • 房产税从租和从价都要交吗
  • 外贸出口备案需准备什么资料
  • 分组计数什么意思
  • 投资收益属于营业外收入吗为什么
  • 应收账款贷方余额年末怎么处理
  • 怎么打印税务登记证明备案表
  • 什么是代扣代缴税收缴款凭证
  • 企业大股东减持股权
  • 存货有哪几个科目
  • 未开票收入怎么报税
  • 什么叫零售差额退税
  • 盘盈的固定资产怎么处理
  • 利润分配审计案例
  • 房地产开发企业增值税税率
  • centos设置开机启动项
  • win8系统怎么创建局域网
  • win8系统电脑没声音怎么办
  • centos7版本推荐
  • xp取消开机启动项
  • win8.1 应用商店是不是不能用了
  • linux服务器dns配置安装
  • win8系统怎么设置
  • linux的安装教程
  • android屏幕适配的五种方式
  • 批处理常用命令
  • python怎么学啊
  • html通配符选择器怎么用
  • unity开发用macbook怎么样
  • 中文路径和英文路径
  • python 遍历字符串修改
  • jq监听input框value值
  • js实现滑动效果
  • 外经证怎么核验
  • 进口退税能退税吗现在
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设