vue使用拖拽功能实现仓库存放货物的需求

效果：
在这里插入图片描述
代码

<template><div><div class="bigTitle">xxxxxxxxxxxxxx仓库拖拽系统</div><div class="container2 flex-j-space-between"><div class="product-list"><div class="leftTree head"><div class="left">物品清单</div></div><div class="product-container"><el-collapse v-model="activeNames" @change="handleChange"><el-collapse-itemclass="list"v-for="(item,index) in products":title="(index + 1) + '、' + item.name":name="index":key="index"><div :draggable="true" @dragstart="onDragStart(item)"><span>长度：</span><span>{{ item.x }}</span><span>、</span><span>宽度：</span><span>{{ item.y }}</span><span>、</span><span>高度：</span><span>{{ item.h }}</span><span>。</span></div></el-collapse-item></el-collapse></div></div><div class="delivery-cabinet"><div class="leftTree head"><div class="left">仓库</div></div><div style="padding-left:48px;"><span class="display-inline t-center" style="width:27.6%;">Ⅰ</span><span class="display-inline t-center" style="margin-left:2%;width:18.4%;">Ⅱ</span><span class="display-inline t-center" style="margin-left:2%;width:27.6%;">Ⅲ</span><span class="display-inline t-center" style="margin-left:2%;width:18.4%;">Ⅳ</span></div><div class="flex-j-space-between height100"><div class="regionSet"><div>D区</div><div>C区</div><div>B区</div><div>A区</div></div><div class="bigBox"><divv-for="(item,index) in cabinets":key="index":style="{width:item.x,height:item.y,marginRight:item.mr}"@drop="onDrop(item.id)"@dragover.prevent:draggable="false"class="smallBox"><divv-for="product in item.products":key="product.id"class="product":draggable="false">{{ JSON.parse(product).name }}</div></div></div></div></div></div></div>
</template><script>
// import draggable from "vuedraggable";export default {components: {// draggable},data() {return {products: [{ id: 1, name: "苹果", x: 30, y: 34, h: 25 },{ id: 2, name: "香蕉", x: 12, y: 10, h: 21 },{ id: 3, name: "西瓜", x: 30, y: 50, h: 23 },{ id: 4, name: "荔枝", x: 57, y: 12, h: 24 },{ id: 5, name: "哈密瓜", x: 45, y: 53, h: 32 },{ id: 6, name: "菠萝", x: 11, y: 5, h: 54 },{ id: 7, name: "葡萄", x: 4, y: 34, h: 6 }],cabinets: [{id: 1,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,location: [{ name: "手表", width: 28, height: 50, x: 0, y: 0, bgClor: "red" },{name: "背包",width: 28,height: 16,x: 40,y: 40,bgClor: "#ff33ff"},{name: "缆索",width: 10,height: 80,x: 29,y: 0,bgClor: "yellow"},{name: "头盔",width: 28,height: 40,x: 40,y: 0,bgClor: "green"},{ name: "面包", width: 33, height: 70, x: 68, y: 0, bgClor: "blue" }],products: []},{id: 2,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 3,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 4,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 5,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 6,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 7,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 8,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 9,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 10,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 11,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 12,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 13,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 14,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 15,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 16,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 17,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 18,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 19,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 20,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 21,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 22,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 23,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 24,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 25,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 26,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 27,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 28,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 29,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 30,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 31,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 32,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 33,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 34,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 35,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 36,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 37,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 38,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: "2%",name: 1,products: []},{id: 39,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []},{id: 40,x: "9.2%",y: "24%",mt: 0,mb: 0,mr: 0,name: 1,products: []}// 其他柜子...],activeNames: ["1"]};},methods: {onDragStart(product) {console.log("1111111", product);event.dataTransfer.setData("text/plain", JSON.stringify(product));},onDrop(cabinetId) {const productData = event.dataTransfer.getData("text/plain");console.log("22222222222", productData);const cabinet = this.cabinets.find(cabinet => cabinet.id === cabinetId);cabinet.products.push(productData);console.log("111", cabinet);},handleChange(val) {console.log(val);}}
};
</script><style scoped>
.bigTitle {height: 40px;line-height: 40px;font-size: 24px;text-align: center;padding-top: 5px;
}
.container2 {width: 100%;height: calc(100vh - 40px);padding: 10px;overflow: hidden;
}
.head {border: 0px solid black;width: 100%;height: 40px;display: flex;justify-content: space-between;align-items: center;padding: 0 0 0 15px;border-bottom: #eff4fa 1px solid;.left {font-weight: bold;font-size: 16px;border-left: 4px blue solid;display: flex;align-items: center;height: 18px;padding-left: 10px;}
}
.product-list {width: 400px;border: 1px solid #f0f0f0;height: 100%;
}
.delivery-cabinet {height: 100%;flex: 1;
}.product-list h2,
.delivery-cabinet h2 {font-size: 24px;margin-bottom: 10px;
}.product-container {/* padding: 10px;border-radius: 4px; */
}.product {padding: 10px;margin-bottom: 8px;background-color: #fff;border: 1px solid #ccc;border-radius: 4px;cursor: move;
}.cabinet-container {background-color: #f2f2f2;padding: 10px;border-radius: 4px;
}.cabinet-slot {padding: 10px;margin-bottom: 8px;background-color: #fff;border: 1px solid #ccc;border-radius: 4px;
}.slot-number {font-size: 18px;font-weight: bold;margin-bottom: 5px;
}.slot-content {display: flex;flex-wrap: wrap;gap: 8px;
}.slot-content .product {padding: 6px 8px;background-color: #eee;
}
.regionSet {width: 45px;height: 100%;margin-top: 10px;
}
.regionSet div {height: 23%;display: flex;align-items: center;justify-content: center;
}
.bigBox {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;height: calc(100% - 40px);width: calc(100% - 50px);padding: 10px 10px;padding-left: 0px;
}
.smallBox {border: 1px solid green;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/22486.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ASP.NET中使用Entity Framework（EF）关联表查询

ASP.NET中使用Entity Framework（EF）关联表查询

在ASP.NET中使用Entity Framework&#xff08;EF&#xff09;进行关联表查询的具体步骤如下&#xff1a; 配置数据库上下文&#xff08;DbContext&#xff09;&#xff1a;在DbContext派生类中&#xff0c;使用DbSet<T>属性表示每个实体对应的数据库表。确保每个实体类和…
阅读更多...
TensorFlow

TensorFlow

什么是 TensorFlow TensorFlow是一个开源的机器学习框架&#xff0c;由Google于2015年推出。它被设计用来构建深度神经网络和其他机器学习模型&#xff0c;从而可以实现图像识别、语音识别、自然语言处理、推荐系统、搜索引擎、预测和控制等应用。TensorFlow是一个基于数据流图…
阅读更多...
【Spring框架】Spring AOP

【Spring框架】Spring AOP

目录 什么是AOP&#xff1f;AOP组成Spring AOP 实现步骤Spring AOP实现原理JDK Proxy VS CGLIB 什么是AOP&#xff1f; AOP&#xff08;Aspect Oriented Programming&#xff09;&#xff1a;⾯向切⾯编程&#xff0c;它是⼀种思想&#xff0c;它是对某⼀类事情的集中处理。⽐如…
阅读更多...
【Jenkins】Jenkins 安装

【Jenkins】Jenkins 安装

Jenkins 安装 文章目录 Jenkins 安装一、安装JDK二、安装jenkins三、访问 Jenkins 初始化页面 Jenkins官网地址&#xff1a;https://www.jenkins.io/zh/download/ JDK下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads/ 清华源下载RPM包地址&#xff…
阅读更多...
golang使用泛型实现mapreduce操作

golang使用泛型实现mapreduce操作

1.使用面向对象的方式写 package streamimport ("fmt""log""reflect""sort""strconv""strings" )type Stream[T any] struct {data []TkeyBy stringsortByNum stringsortByStr []string }func FromElem…
阅读更多...
数据资产管理和数据治理是什么关系？

数据资产管理和数据治理是什么关系？

数据治理和数据资产管理 数据治理的目的就是让数据更准确、一致、完整、安全、可用&#xff0c;降低总体拥有成本&#xff1b; 数据资产管理就是在数据治理的基础上&#xff0c;对数据资产的行程、确权、价值评估等相关活动进行管理的过程&#xff1b; 数据资产经营是在数据…
阅读更多...
【Excel】记录Match和Index函数的用法

【Excel】记录Match和Index函数的用法

最近一直用到的两个处理EXCEL表格数据的函数向大家介绍一下&#xff0c;写这篇博文的目的也是为了记录免得自己忘记了&#xff0c;嘻嘻。 先上百度的链接 Match函数的用法介绍&#xff1a;https://jingyan.baidu.com/article/2fb0ba40b4933941f3ec5f71.html 小结&#xff1a;…
阅读更多...
开发一个饲料商城小程序需要多少钱

开发一个饲料商城小程序需要多少钱

随着宠物行业的蓬勃发展&#xff0c;饲料商城小程序作为一个重要的销售渠道&#xff0c;吸引了越来越多的投资者。那么&#xff0c;开发一套饲料商城小程序需要多少钱呢&#xff1f;本文将为您详细解答。 首先&#xff0c;开发一套饲料商城小程序的价格受到多个因素的影响&…
阅读更多...
架构训练营学习笔记：5-1 计算架构模式之多级缓存架构

架构训练营学习笔记：5-1 计算架构模式之多级缓存架构

序 本节主要是计算架构。 多级缓存架构 缓存与缓冲&#xff1a;通常场景是读缓存&#xff0c;写缓冲。 缓存技术的本质&#xff1a;空间换时间&#xff0c;因此缓存架构属于高性能计算 架构。 缓存设计框架 主要考虑存什么&#xff1f;存多久&#xff1f;存哪里&#xff1f;如…
阅读更多...
2023华数杯数学建模竞赛C题思路解析

2023华数杯数学建模竞赛C题思路解析

如下为&#xff1a;2023华数杯数学建模竞赛C题 母亲身心健康对婴儿成长的影响 的思路解析 C题 母亲身心健康对婴儿成长的影响 母亲是婴儿生命中最重要的人之一&#xff0c;她不仅为婴儿提供营养物质和身体保护&#xff0c;还为婴儿提供情感支持和安全感。母亲心理健康状态的不…
阅读更多...
将css文件中的px转化为rem

将css文件中的px转化为rem

pxToRem.js /*** 使用方式&#xff1a;* 与引入的文件放在同一目录下进行引用配置&#xff0c;执行:node &#xff08;定义的文件&#xff09;*/ const fs require(fs) const path require(path) /*** entry&#xff1a;入口文件路径 type:Strng* pxtopx&#xff1a;以倍数转…
阅读更多...
JS_判断打开的是什么手机品牌，判断是否是手机，平板，pc

JS_判断打开的是什么手机品牌，判断是否是手机，平板，pc

判断业务是否是 iphone、华为、小米、oppo、view、三星 打开 手机品牌userAgent库 http://www.fynas.com/ua function judgeBrand(sUserAgent) {var isIphone sUserAgent.match(/iphone/i) iphone;var isHuawei sUserAgent.match(/huawei/i) huawei;var isHonor sUserAge…
阅读更多...
【LNMP】LNMP

【LNMP】LNMP

LNMP&#xff1a;是目前成熟的企业网站的应用模式之一&#xff0c;指的是一套协同工作的系统和相关软件&#xff1b;能够提供静态页面服务&#xff0c;也可以提供动态web服务 L Linux系统&#xff0c;操作系统N Nginx网站服务&#xff0c;前端&#xff0c;提供前端的静态…
阅读更多...
神策新一代分析引擎架构演进

神策新一代分析引擎架构演进

近日&#xff0c;神策数据已经推出全新的神策分析 2.5 版本&#xff0c;该版本支持分析模型与外部数据的融合性接入&#xff0c;构建全域数据融合模型&#xff0c;实现从用户到经营的全链路、全场景分析。新版本的神策分析能够为企业提供更全面、更有效的市场信息和经营策略&am…
阅读更多...
Springboot部署ELK实战

Springboot部署ELK实战

Springboot部署ELK实战 1、部署docker、docker-compose环境安装docker安装docker-compose 2、搭建elk1、构建目录&&配置文件1、docker-compose.yml 文档2、Kibana.yml3、log-config.conf 2、添加es分词器插件3、启动 3、Springboot项目引入es、logStash配置1、引入依赖…
阅读更多...
【雕爷学编程】MicroPython动手做（27）——物联网之掌控板小程序2

【雕爷学编程】MicroPython动手做（27）——物联网之掌控板小程序2

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…
阅读更多...
数据治理实践：元数据管理架构的演变

数据治理实践：元数据管理架构的演变

数据治理实践&#xff1a;元数据管理架构的演变 前言 近几年来数据的量级在疯狂的增长&#xff0c;由此带来了系列的问题。作为对人工智能团队的数据支撑&#xff0c;我们听到的最多的质疑是 “正确的数据集”&#xff0c;他们需要正确的数据用于他们的分析。我们开始意识到&…
阅读更多...
MyBatis-动态SQL-if-案例

MyBatis-动态SQL-if-案例

案例 完善更新员工的功能&#xff0c;修改为动态更新员工数据信息原代码如下&#xff1a; Update("update emp\n" "set username #{username},\n" " name#{name},\n" " gender#{gender},\n" " image#{image},\n…
阅读更多...
如何去除 JavaScript 对象中的空值和空对象

如何去除 JavaScript 对象中的空值和空对象

在 JavaScript 开发中&#xff0c;我们经常需要处理对象数据&#xff0c;但有时这些对象可能包含一些空值或空对象。在处理数据时&#xff0c;通常需要将这些空值或空对象去除&#xff0c;以便得到更干净、更紧凑的数据结构。本文将介绍几种方法&#xff0c;教你如何去除 JavaS…
阅读更多...
https请求异常引发(Received fatal alert: unrecognized_name)：如何快速解决项目中问题？

https请求异常引发(Received fatal alert: unrecognized_name)：如何快速解决项目中问题？

总结思考&#xff1a;如何做一个出色的开发者&#xff1f; 首先我们要承认我们大部分程序员是应用开发&#xff0c;不是操作系统、协议、框架开发等这类底层开发者。 其一&#xff1a;是否能快速定位问题。如找到出现问题的代码&#xff0c;bug出现在哪一行&#xff0c;哪个应…
阅读更多...
最新文章

Copyright @ 2022~2023