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

  • vivox70pro+怎么设置语音助手(vivox70pro怎么设置门禁卡)

    vivox70pro+怎么设置语音助手(vivox70pro怎么设置门禁卡)

  • 抖音移除粉丝后会取消对方对我的关注吗(抖音移除粉丝后怎么恢复粉丝)

    抖音移除粉丝后会取消对方对我的关注吗(抖音移除粉丝后怎么恢复粉丝)

  • 苹果11pro max是双卡双待卡槽在哪里(苹果11pro max是双声道吗)

    苹果11pro max是双卡双待卡槽在哪里(苹果11pro max是双声道吗)

  • 腾讯课堂切换设备算时间吗(腾讯课堂切换设备后时长会清空吗)

    腾讯课堂切换设备算时间吗(腾讯课堂切换设备后时长会清空吗)

  • 在苹果官网买东西一般几天送到(在苹果官网买东西怎么联系客服)

    在苹果官网买东西一般几天送到(在苹果官网买东西怎么联系客服)

  • 苹果手机怎么一键清理运行的软件(苹果手机怎么一键关闭所有程序)

    苹果手机怎么一键清理运行的软件(苹果手机怎么一键关闭所有程序)

  • 抖音音浪是怎么来的(抖音音浪是怎么增加的)

    抖音音浪是怎么来的(抖音音浪是怎么增加的)

  • 抖音实名认证老失败怎么办(抖音实名认证老是失败怎么回事)

    抖音实名认证老失败怎么办(抖音实名认证老是失败怎么回事)

  • i34130最高配什么显卡(i34130性能怎么样)

    i34130最高配什么显卡(i34130性能怎么样)

  • 苹果电池多久下降正常(iphone电池多久掉)

    苹果电池多久下降正常(iphone电池多久掉)

  • 删除qq留言显示操作频繁(qq留言内容已删除但是还在)

    删除qq留言显示操作频繁(qq留言内容已删除但是还在)

  • 钒电池与锂电池的对比(钒电池与锂电池対比)

    钒电池与锂电池的对比(钒电池与锂电池対比)

  • retina屏什么意思(retina屏怎么样)

    retina屏什么意思(retina屏怎么样)

  • 192.168.1.1为什么进不去(192.168.1.1为什么登不上)

    192.168.1.1为什么进不去(192.168.1.1为什么登不上)

  • 小米8一碰指纹就亮屏(小米8指纹失灵重启好了是咋回事)

    小米8一碰指纹就亮屏(小米8指纹失灵重启好了是咋回事)

  • ftp站点名称是什么(ftp站点名称怎么写)

    ftp站点名称是什么(ftp站点名称怎么写)

  • 华为手机只振动不开机(华为手机只振动不开机亮灯)

    华为手机只振动不开机(华为手机只振动不开机亮灯)

  • 小米快应用服务框架可以删除吗(小米快应用服务框架怎么打开)

    小米快应用服务框架可以删除吗(小米快应用服务框架怎么打开)

  • 拼多多怎样申请换货(拼多多怎样申请退款)

    拼多多怎样申请换货(拼多多怎样申请退款)

  • oppor11手机强制关机键(oppor11手机强制关机方法)

    oppor11手机强制关机键(oppor11手机强制关机方法)

  • 怎么开启微信自启动(怎么开启微信自动回复)

    怎么开启微信自启动(怎么开启微信自动回复)

  • 双十一付尾款可以一起付吗(双十一付尾款可以分期吗)

    双十一付尾款可以一起付吗(双十一付尾款可以分期吗)

  • 快手极速版怎么上传作品(快手极速版怎么换绑提现微信)

    快手极速版怎么上传作品(快手极速版怎么换绑提现微信)

  • nova4可以开空调吗(华为nova4可以开空调不)

    nova4可以开空调吗(华为nova4可以开空调不)

  • 数据通信的信道包括什么(数据通信的信道包括同步信道和异步信道)

    数据通信的信道包括什么(数据通信的信道包括同步信道和异步信道)

  • 新版Edge浏览器开启“Windows样式重叠滚动条”功能(新版edge浏览器设置背景图片)

    新版Edge浏览器开启“Windows样式重叠滚动条”功能(新版edge浏览器设置背景图片)

  • 增值税电子发票查询平台
  • 信用减值损失与坏账准备关系
  • 贴现的费用怎么入账
  • 当前时间该属期不可申报
  • 长期股权投资其他综合收益借贷方向
  • 从事股权投资业务如何界定
  • 抵扣联多长时间的勾选认证
  • 房地产企业预缴土地增值税
  • 非行政性罚款可以撤销吗
  • 未完工的工程款怎么支付
  • 哪些费用可以进项抵扣
  • 电子发票怎么红冲步骤视频
  • 个人所得税返还奖励财务人员做账
  • 广告制作税收编码怎么填
  • 出差补贴没有发票
  • 开户许可证复印件是什么
  • 办公室空调维修属于办公费吗
  • 货物装卸过程中由于操作不当或违反操作规程
  • 应付工程款账务处理
  • 设立全资子公司的风险
  • php session_start
  • win11电脑屏幕倒过来了怎么办
  • 转账收到支付宝电话
  • PHP:stream_register_wrapper()的用法_Stream函数
  • php数组函数题目
  • 计算机视觉就业前景
  • js16.vip
  • uniapp的css库
  • 挪威有鹿吗
  • vue错误提示
  • 原材料的盘盈与盘亏的会计处理
  • 用php做计算
  • php获取给定日期函数
  • 姆科马齐国家公园
  • 注册资金抽回
  • vue uncaught typeerror
  • thinkphp import
  • 股权收购账务处理
  • 手机做固定资产报废理由怎么写好
  • 会计科目借贷方向图表
  • 如何修改mysql
  • 企业发生的广告费应计入
  • 工会经费计提按应付职工薪酬借方还是贷方?
  • 增值税纳税申报类型怎么填
  • 营业收入与利润总额的比值
  • 预付款项为什么这么多
  • sqlserver2005 xml字段的读写操作
  • 税盘连接服务器失败
  • 调账和调帐区别
  • 购入固定资产计累计盈余
  • 票据行为为什么不能撤销
  • 本年利润要结转吗为什么
  • 库存商品暂估入库是什么意思
  • sqlserver存储过程实例详解
  • sqlserver 查看表
  • 安装并激活navicat
  • ntfs跟fat32
  • centos挂载lun
  • win8如何打开设置
  • linux系统进程管理
  • 有没有win8系统
  • win7无法打开windows功能
  • 浅谈jquery的应用
  • Bullet(Cocos2dx)之创建地形
  • nodejs项目搭建
  • linux4个主要部分
  • vue.js打包部署
  • dns设置为网关会出现什么问题了
  • 回弹健腹轮是智商税吗
  • android数据存储与访问的方式有
  • python写脚本教程
  • jquery删除对象
  • 江西电子税务局官网
  • 网上申报增值税纳税申报表怎么填写
  • 哈尔滨出租车可以拼车吗
  • 北京税务部门需要党员吗
  • 社保申报每月几号申报
  • 山西省税务局官网登录
  • 出口增加为什么汇率会增加
  • 告知承诺和非告知承诺
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设