js 拖拽事件

拖放API基础

作用于被拖放元素的事件

dragstart 开始拖拽时触发。

drag 在拖拽的过程中触发。

dragend 拖拽完成时触发。

作用于目标元素的事件

dragenter 拖放元素进入目标元素时触发。

dragover 拖放元素在目标元素上时触发。

dragleave 拖放元素在目标元素上离开时触发（在目标元素上时如果松开鼠标也会触发）。

drop 被拖放的元素在目标元素上同时鼠标放开触发的事件。【注：需要阻止dragover的默认行为才会触发drop事件】

被拖拽的元素一定要有 draggable="true" 属性，才能被拖动。

示例

实现简单的拖拽事件（将一个 div 中的内容拖拽到另一个 div ），被拖放元素需要 dragstart、dragend 这两个事件；目标元素需要 dragover、dragenter、drop 事件。

<template>
  <div>
    <div class="page">
      <!-- 被拖拽元素 -->
      <div>
        <ul
          v-for="(item, index) in left"
          :key="index"
          draggable="true"
          @dragstart="dragstart(index)"
          @dragend="dragend"
          class="box"
        >
          <li>{{ item }}</li>
        </ul>
      </div>
      
      <!-- 目标元素 -->
      <div>
        <div
          @dragover="dragover($event)"
          @dragenter="dragenter($event, index)"
          @drop="drop($event, index)"
          v-for="(item, index) in right"
          :key="index"
          class="divBox"
        >
          {{ item.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, watch } from "vue";
export default defineComponent({
  name: "demo",
  components: {},
  setup() {
    const state = reactive({
      left: ["aaa", "bbb"],
      right: [
        {
          style: "",
          value: "",
        },
        {
          style: "",
          value: "",
        },
        {
          style: "",
          value: "",
        },
      ],
      leftIndex: 0,
      rightIndex: 0,
    });

    const dragstart = (index) => {
      state.leftIndex = index;
    };

    const dragenter = (e, index) => {
      e.preventDefault();
      state.rightIndex = index;
    };

    const drop = (e, index) => {
      if (state.rightIndex == index) {
        dealData();
      }
    };

    const dragover = (e) => {
      e.preventDefault();
    };

    const dealData = () => {
      state.right[state.rightIndex].value = state.left[state.leftIndex];
    };

    return {
      dragstart,
      dragenter,
      drop,
      dragover,
      ...toRefs(state),
    };
  },
});
</script>

<style scoped lang="scss">
.page {
  width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box {
  width: 200px;
  height: 100px;
  border: 1px solid #eeeeee;
}
.divBox {
  width: 300px;
  height: 200px;
  border: 1px solid #eeeeee;
}
</style>