vue拖拽 ondrop不生效

在 Vue 中使用拖拽功能，要使 ondrop 事件生效，需要确保在相应的元素上取消 ondragover 事件的默认行为，并且要阻止 ondrop 事件的默认行为。以下是一个可用示例：

<template>
  <div>
    <!-- 拖拽源 -->
    <div class="draggable" draggable="true" @dragstart="dragStart">拖拽我</div>

    <!-- 拖放目标 -->
    <div class="droppable" @dragover.prevent @drop="dropHandler">放在这里</div>
  </div>
</template>

<script>
export default {
  methods: {
    dragStart(event) {
      // 设置拖拽数据
      event.dataTransfer.setData("text/plain", event.target.id);
			console.log(event.target.id);
    },
    dropHandler(event) {
      event.preventDefault();
      // 获取拖拽数据
      const data = event.dataTransfer.getData("text/plain");
			console.log(data);
    }
  }
};
</script>

<style scoped>
.draggable {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin-bottom: 20px;
  cursor: pointer;
}

.droppable {
  width: 200px;
  height: 200px;
  border: 2px dashed gray;
  padding: 20px;
}
</style>

创建一个可拖拽的 .draggable 元素，和一个 .droppable 元素作为拖放目标。

在拖拽源上，监听 dragstart 事件，在 dragStart 方法中设置拖拽数据。

在拖放目标上，监听 dragover 事件，调用 prevent 方法来阻止默认行为，同时在 dropHandler 方法中阻止 drop 事件的默认行为。

其他实现方式参考：

javascript，drop拖拽事件之vue实际应用