vue3拖拽组件

<template>
  <div class="draggable-container">
    <div 
      class="draggable-item" 
      draggable="true" 
      @dragstart="onDragStart" 
      @dragend="onDragEnd"
      :style="itemStyle"
    >
      拖拽我
    </div>
    <div 
      class="dropzone" 
      @dragover.prevent 
      @drop="onDrop"
    >
      放在这里
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemPosition: { x: 0, y: 0 },
      isDragging: false,
    };
  },
  computed: {
    itemStyle() {
      return {
        transform: `translate(${this.itemPosition.x}px, ${this.itemPosition.y}px)`,
      };
    },
  },
  methods: {
    onDragStart(event) {
      this.isDragging = true;
      event.dataTransfer.effectAllowed = 'move';
      event.dataTransfer.setData('text/plain', '拖拽元素');
    },
    onDragEnd() {
      this.isDragging = false;
    },
    onDrop(event) {
      if (this.isDragging) {
        const data = event.dataTransfer.getData('text/plain');
        console.log('Dropped:', data);
        this.itemPosition = { x: event.clientX - 50, y: event.clientY - 25 }; // 调整位置以适应元素大小
      }
    },
  },
};
</script>

<style scoped>
.draggable-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.draggable-item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  text-align: center;
  line-height: 50px;
  cursor: grab;
}

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

解释说明

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

   • 创建了一个包含两个 div 的容器：一个可拖拽的元素 (draggable-item) 和一个放置区域 (dropzone)。
   • 使用了 draggable="true" 属性使元素可以被拖拽，并绑定了相应的事件处理函数。

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

   • 定义了 data 函数来存储拖拽状态和位置信息。
   • 使用 computed 计算属性 itemStyle 来动态设置拖拽元素的位置。
   • 实现了三个方法：
     • onDragStart: 当开始拖拽时触发，设置拖拽效果并传递数据。
     • onDragEnd: 当结束拖拽时触发，重置拖拽状态。
     • onDrop: 当元素被放置在目标区域时触发，更新拖拽元素的位置。

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

   • 使用简单的 CSS 样式来定义拖拽元素和放置区域的外观。
   • 设置了拖拽元素的宽度、高度、背景颜色等，并使其居中显示。
   • 设置了放置区域的宽度、高度、背景颜色等，并使其居中显示。