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-item
              class="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">
            <div
              v-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"
            >
              <div
                v-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>