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

  • 动产租赁税率是多少2023
  • 股东利润分配怎么做账
  • 受让应收账款的账务处理
  • 农村合作社怎么挣钱
  • 以银行存款支付水电费
  • 工会经费支付福利方案
  • 联营企业属于企业吗
  • 新会计准则 预付房租怎么做账
  • 法人可以自己申诉个税吗
  • 其他应付款转为营业外收入要交税吗
  • 二手房如何缴纳契税
  • 计提坏账递延所得税资产怎么算
  • 广告业与服务业哪个好
  • 固定资产如何抵扣企业所得税
  • 计提工会经费是按应付职工薪酬的借方还是贷方
  • 增值税发票小规模2023
  • 营业执照里承办什么业务
  • 医院企业所得税免税吗
  • 个人房补申请书怎么办
  • 银行卡刷卡消费限额
  • 简易征收企业所得税几个点
  • 网络直播应如何缴纳增值税?
  • 将商业承兑汇票进行贴现 符有追索权的会计分录
  • 长期股权投资是什么科目
  • 给已经注销的公司退款
  • 跨年的暂估成本怎么冲回
  • 百内国家公园塔状尖峰
  • 怎样删除电脑系统账户
  • 库乐队是苹果自带的嘛
  • 缴纳集团公司的税收
  • 企业支付银行的贷款利息可以税前扣除吗为什么
  • 发票已开不符合收入确认条件账务处理怎么做?
  • thinkphp开发框架
  • 自愿放弃增值税优惠怎么写
  • 结转损益类收入科目分录
  • php对象
  • 垃圾分类手工小模型
  • pwd命令的用法
  • 以旧换新方式销售金银首饰的消费税处理
  • 坏账准备是什么性质的科目
  • sql建立聚集索引语句
  • sqlserver2008安装闪退
  • 个体户经营所得税率表
  • 个税申报系统非正常可以改为正常吗?
  • 工程项目甲方是什么意思
  • 补提去年累计折旧
  • 咨询服务费可以全额扣除吗
  • 房地产开发费用10%
  • 跨国公司国内外发展现状
  • 小企业如何建立风险管理制度
  • 企业公司制改建的有关规定
  • sql server数据库版本
  • windows server 2008 r2最大支持内存
  • windows 11安全模式
  • 如何设置桌面背景颜色
  • win10系统怎么查询ip
  • centos7 zsh
  • 怎么优化win10系统
  • kprcycleaner.exe是什么
  • win7开机提示音在哪里关闭
  • win8系统没有声音怎么办
  • 我的第二个姐姐用英语怎么说
  • javascript ?
  • node.js配置
  • 各浏览器网址
  • 用jquery制作轮播图效果
  • cssfixed中浮动
  • javascript还有人用吗
  • Unity3D游戏开发标准教程吴亚峰于复兴人民邮电出版社
  • js获取上传文件的文件名
  • pjblog修改技巧汇总
  • jquery数据类型
  • jquery 3.5
  • 在python程序中变量名不能用
  • 砂石需要缴纳资源税吗
  • 国家对供暖企业更换主管道有没有年限?
  • 印花税为什么不计入资产成本
  • blueerdos和鄂尔多斯区别
  • 河北税务云办税厅官方
  • 国企残疾职工安置
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设