vue实现数据拖动

Vue 实现数据拖动

使用 HTML5 拖放 API

HTML5 提供了原生的拖放 API，可以通过 draggable 属性、dragstart、dragend、dragover 和 drop 事件来实现拖动功能。

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      draggable="true"
      @dragstart="handleDragStart(index)"
      @dragend="handleDragEnd"
    >
      {{ item }}
    </div>
    <div 
      @dragover.prevent
      @drop="handleDrop"
    >
      拖放到这里
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      draggedIndex: null
    }
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index
    },
    handleDragEnd() {
      this.draggedIndex = null
    },
    handleDrop() {
      if (this.draggedIndex !== null) {
        const item = this.items.splice(this.draggedIndex, 1)[0]
        this.items.push(item)
      }
    }
  }
}
</script>

使用第三方库 Vue.Draggable

Vue.Draggable 是一个基于 Sortable.js 的 Vue 组件，提供了更简单的 API 来实现拖动功能。

安装 Vue.Draggable：

npm install vuedraggable

使用示例：

<template>
  <div>
    <draggable 
      v-model="items" 
      @end="onDragEnd"
    >
      <div v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖动结束', this.items)
    }
  }
}
</script>

自定义拖动逻辑

如果需要更复杂的拖动逻辑，可以结合 Vue 的响应式特性和自定义事件来实现。

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      @mousedown="startDrag(index, $event)"
      @mousemove="handleDrag($event)"
      @mouseup="stopDrag"
      :style="{ position: 'absolute', left: item.x + 'px', top: item.y + 'px' }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', x: 0, y: 0 },
        { name: 'Item 2', x: 100, y: 0 },
        { name: 'Item 3', x: 200, y: 0 }
      ],
      dragging: false,
      dragIndex: null,
      startX: 0,
      startY: 0
    }
  },
  methods: {
    startDrag(index, event) {
      this.dragging = true
      this.dragIndex = index
      this.startX = event.clientX - this.items[index].x
      this.startY = event.clientY - this.items[index].y
    },
    handleDrag(event) {
      if (this.dragging) {
        this.items[this.dragIndex].x = event.clientX - this.startX
        this.items[this.dragIndex].y = event.clientY - this.startY
      }
    },
    stopDrag() {
      this.dragging = false
      this.dragIndex = null
    }
  }
}
</script>

注意事项

• 使用 HTML5 拖放 API 时，需要阻止默认行为（如 @dragover.prevent）。
• Vue.Draggable 提供了更丰富的功能，如分组、动画等，适合复杂场景。
• 自定义拖动逻辑需要处理鼠标事件和元素位置计算，适合特定需求。