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

  • 以前的快手号怎样才可以重新登录(以前的快手号怎样才可以注销)

    以前的快手号怎样才可以重新登录(以前的快手号怎样才可以注销)

  • 闲鱼怎么关联同款宝贝(闲鱼怎么关联同款宝贝没有了)

    闲鱼怎么关联同款宝贝(闲鱼怎么关联同款宝贝没有了)

  • 目前世界上最大的计算机互联网络是什么(目前世界上最大的能源消费国是)

    目前世界上最大的计算机互联网络是什么(目前世界上最大的能源消费国是)

  • 快手大头娃娃特效怎么拍的(快手大头娃娃特效是什么)

    快手大头娃娃特效怎么拍的(快手大头娃娃特效是什么)

  • 腾讯会议怎样不显示麦(腾讯会议怎样不被提问)

    腾讯会议怎样不显示麦(腾讯会议怎样不被提问)

  • 打印机没有wifi功能怎么连接手机打印(打印机没有wifi和蓝牙怎么连接手机)

    打印机没有wifi功能怎么连接手机打印(打印机没有wifi和蓝牙怎么连接手机)

  • 乐心手环放时间长充电没反应(乐心手环时间长不用)

    乐心手环放时间长充电没反应(乐心手环时间长不用)

  • fla一tl10什么型号(flaal10是什么型号)

    fla一tl10什么型号(flaal10是什么型号)

  • 为什么铁路12306无法人证核验(为什么铁路12306无法查询车次信息)

    为什么铁路12306无法人证核验(为什么铁路12306无法查询车次信息)

  • 对方关机 微信电话响吗(对方关机微信语音能打通吗)

    对方关机 微信电话响吗(对方关机微信语音能打通吗)

  • 微机中的系统总线可分成(微机的系统总线有几种)

    微机中的系统总线可分成(微机的系统总线有几种)

  • ipad能不能装内存卡(ipad可以装内存吗)

    ipad能不能装内存卡(ipad可以装内存吗)

  • 咪咕视频怎么用wifi看(咪咕视频怎么用微信支付)

    咪咕视频怎么用wifi看(咪咕视频怎么用微信支付)

  • vivos5怎么关闭智慧桌面(vivo智能怎么关)

    vivos5怎么关闭智慧桌面(vivo智能怎么关)

  • qq音乐怎么设置密码(qq音乐怎么设置在其他应用上播放)

    qq音乐怎么设置密码(qq音乐怎么设置在其他应用上播放)

  • 苹果x怎么弄呼吸灯(苹果x怎么呼唤)

    苹果x怎么弄呼吸灯(苹果x怎么呼唤)

  • 三星s10有什么特别功能(三星s10有什么新功能)

    三星s10有什么特别功能(三星s10有什么新功能)

  • 支付宝智能设备在哪里(支付宝智能设备怎么改名字)

    支付宝智能设备在哪里(支付宝智能设备怎么改名字)

  • 小米手环4绑定步骤(小米手环4绑定不了小米运动)

    小米手环4绑定步骤(小米手环4绑定不了小米运动)

  • 企查查怎么导出数据(企查查怎么导出一万多)

    企查查怎么导出数据(企查查怎么导出一万多)

  • 钉钉运动打不开怎么办(钉钉运动步数不动是什么情况)

    钉钉运动打不开怎么办(钉钉运动步数不动是什么情况)

  • qq相册的视频能恢复吗(qq相册的视频能发抖音吗)

    qq相册的视频能恢复吗(qq相册的视频能发抖音吗)

  • oppo 新机reno z是什么处理器(oppo reno z刚出来多少钱)

    oppo 新机reno z是什么处理器(oppo reno z刚出来多少钱)

  • java泛型类型的调用和实例化(java泛型类和泛型方法)

    java泛型类型的调用和实例化(java泛型类和泛型方法)

  • 个人所得税申报操作流程
  • 延期交税的情况有哪些
  • 产成品和半成品如何盘点
  • 个税申报初始化密码
  • 来料加工生产成本账务处理
  • 公司股东投资比例
  • 证券交易印花税是多少
  • 核销债权债务依据
  • 电子商业承兑对方接收了还可以作废吗
  • 工程部用的测试仪器
  • 预付水电费后应怎么做账
  • 银行客户专用回单分录
  • 个人合伙企业有没有企业所得税
  • 船舶吨税范围
  • 营改增开票规定
  • 税务局查账征收转为核定征收之程序
  • 保安公司增值服务
  • 个税累计预缴税额税率表是年还是月
  • 劳务公司差额征税账务处理
  • 冲账的记账凭证冲销错误记录
  • 失控发票进项转出申报
  • 现金采购怎么算
  • 小型微利企业所得税税率2023
  • 出纳电汇流程
  • 收购农产品再销售最新税收政策
  • iphone微信透明壁纸怎么设置
  • wordpress文章缩略图
  • 建筑行业收到工程款会计分录
  • 小规模差额征税是什么意思
  • 环形链表入口节点
  • php中header的用法
  • 与取得收入无关的成语
  • PHP:mcrypt_generic_deinit()的用法_Mcrypt函数
  • 实收资本明细账模板
  • 新购车辆检测费计入原值吗
  • chrome怎么用谷歌
  • 超图的应用举例
  • 科目余额表平了但资产负债表不平
  • 社保基数和实际工资怎么算
  • vue里的for循环
  • 企业季度预缴土地出让金
  • 应收票据利息的确认
  • 微信公众号的推送
  • 税务三方协议怎么重签
  • 所有者权益总计是什么
  • 不免征个人所得税的是个人转让著作权所得
  • 企业筹建期间
  • 企业资本包括
  • 无偿调入固定资产怎么入账
  • 个税累计预扣法导致税交多了
  • 一般纳税人应交税费二级科目有哪些
  • 代扣代缴个人所得税手续费返还 增值税
  • 汇算清缴思路
  • 员工的提成
  • 上年期末留底税额怎么算
  • 商品流通环节包括
  • 转账支付水电费
  • 企业向福利院捐款属于 公共关系
  • 增值税发票超过多久不能抵扣
  • 以考核为由扣除工资
  • 用友为什么引入不了账套
  • 费用报销办法
  • 私营公司待摊费怎么算
  • mysql5.7.29安装
  • sql汇总查询
  • 32位的win7和64位的win7要选择哪个呢?它们有什么区别?
  • win7系统怎么设置开机启动项
  • 帮我打开双击锁屏
  • XP系统怎么设置屏幕常亮
  • winxp修改ip地址方法
  • hosts文件位置在哪
  • windows无法访问\\192.168.1.104
  • linux命令光标移动到末尾
  • opengl绘图
  • 淘宝店铺首页导航栏css
  • python打包成deb
  • python3 编码转换
  • 滞留票税务局会罚款多少
  • 处室岗位是什么意思
  • 农村信用社升级为什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设