draggable vue

<template>
  <div>
    <div
      class="draggable-item"
      draggable="true"
      @dragstart="handleDragStart"
      @dragend="handleDragEnd"
    >
      拖拽我
    </div>
    <div
      class="drop-zone"
      @dragover.prevent
      @drop="handleDrop"
    >
      放在这里
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(event) {
      event.dataTransfer.setData('text/plain', '拖拽元素');
      console.log('开始拖拽');
    },
    handleDragEnd() {
      console.log('结束拖拽');
    },
    handleDrop(event) {
      const data = event.dataTransfer.getData('text/plain');
      console.log('已放置:', data);
    }
  }
};
</script>

<style>
.draggable-item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
}

.drop-zone {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  margin-top: 20px;
  text-align: center;
  line-height: 200px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 创建了两个 div 元素：一个是可以拖拽的元素（draggable-item），另一个是放置区域（drop-zone）。
   • draggable="true" 属性使元素可以被拖拽。
   • 使用 @dragstart、@dragend 和 @drop 事件监听器来处理拖拽和放置操作。

2. 脚本部分 (<script>):

   • 定义了三个方法：
     • handleDragStart: 当开始拖拽时触发，设置拖拽数据。
     • handleDragEnd: 当结束拖拽时触发，通常用于清理或重置状态。
     • handleDrop: 当元素被放置到目标区域时触发，获取并处理拖拽的数据。

3. 样式部分 (<style>):

   • 简单的样式定义，使拖拽元素和放置区域更易于识别和操作。