基于HTML5 API实现拖拽功能的实现

今天花半个多小时写了个基于HTML5 API实现的拖拽组件。 被拖拽的子组件需要加上draggable="true"的属性，容器标签需要有drop，dragover接受拖拽事件 完整代码如下： vue组件完整代码如下

<template>
  <div class="hello">
    <div class="left rect" @drop.prevent="drop" @dragover.prevent="dragover">
      <div
        class="unit"
        :id="`test${item}`"
        :ref="`draggable${item}`"
        :draggable="true"
        @dragstart="dragstart($event, item, 'left')"
        v-for="item in arr"
        :key="item"
      >
        {{ item }}
      </div>
    </div>
    <div class="mid rect" @drop.prevent="drop" @dragover.prevent="dragover">
      <div
        class="unit"
        :id="`test${item}`"
        :ref="`draggable${item}`"
        :draggable="true"
        @dragstart="dragstart($event, item, 'mid')"
        v-for="item in midArr"
        :key="item"
      >
        {{ item }}
      </div>
    </div>
    <div class="right rect" @drop.prevent="drop" @dragover.prevent="dragover">
      <div
        class="unit"
        :id="`test${item}`"
        :ref="`draggable${item}`"
        :draggable="true"
        @dragstart="dragstart($event, item, 'right')"
        v-for="item in rightArr"
        :key="item"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DragComponent",
  props: {
    msg: String
  },
  data() {
    return {
      dragItem: null,
      dragParent: null,
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      midArr: [],
      rightArr: []
    };
  },
  methods: {
    dragstart(e, item, parent) {
      this.dragItem = item;
      this.dragParent = parent;
    },
    dragover() {
      console.log("dragover");
    },
    drop(e) {
      if (
        e.target.className.includes(this.dragParent) ||
        e.target.className.includes("unit")
      ) {
        this.dragItem = null;
        this.dragParent = null;
        return;
      }
      if (e.target.className.includes("mid")) {
        this.midArr.push(this.dragItem);
      }
      if (e.target.className.includes("left")) {
        this.arr.push(this.dragItem);
      }
      if (e.target.className.includes("right")) {
        this.rightArr.push(this.dragItem);
      }

      if (this.dragParent === "mid") {
        this.midArr = this.midArr.filter((item) => item !== this.dragItem);
      }
      if (this.dragParent === "left") {
        this.arr = this.arr.filter((item) => item !== this.dragItem);
      }
      if (this.dragParent === "right") {
        this.rightArr = this.rightArr.filter((item) => item !== this.dragItem);
      }
      this.dragItem = null;
      this.dragParent = null;
    }
  }
};
</script>

<style scoped>
.hello {
  display: flex;
  justify-content: space-around;
}
.rect {
  width: 380px;
  height: 380px;
}
.unit {
  width: 30%;
  margin-right: 3%;
  height: 30%;
  margin-bottom: 3%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: aqua;
  cursor: grab;
  float: left;
}
.left {
  border: 1px solid red;
}
.mid {
  border: 1px solid green;
}
.right {
  border: 1px solid yellow;
}
</style>

效果如下图：

就这样吧 直接复制拿去用吧 懒得写了 996的活太多