vue实现拖放

Vue 实现拖放功能的方法

使用 HTML5 原生拖放 API

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

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
      draggedItem: null
    }
  },
  methods: {
    handleDragStart(event, item) {
      this.draggedItem = item;
      event.dataTransfer.setData('text/plain', item.id);
    },
    handleDragEnd() {
      this.draggedItem = null;
    },
    handleDrop(event) {
      event.preventDefault();
      const itemId = event.dataTransfer.getData('text/plain');
      // 处理拖放逻辑
    }
  }
}
</script>

使用第三方库 Vue.Draggable

Vue.Draggable 是一个基于 Sortable.js 的 Vue 组件，可以轻松实现拖放排序功能。

安装 Vue.Draggable：

npm install vuedraggable

使用示例：

<template>
  <div>
    <draggable 
      v-model="items" 
      @end="onDragEnd"
    >
      <div v-for="item in items" :key="item.id">
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ]
    }
  },
  methods: {
    onDragEnd() {
      // 拖放结束后的逻辑
    }
  }
}
</script>

自定义拖放实现

如果需要更复杂的拖放逻辑，可以结合鼠标事件（mousedown、mousemove、mouseup）来自定义拖放行为。

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      @mousedown="startDrag($event, item)"
    >
      {{ item.name }}
    </div>
    <div 
      ref="dropZone"
      @mouseup="handleDrop"
    >
      拖放到这里
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
      draggedItem: null
    }
  },
  methods: {
    startDrag(event, item) {
      this.draggedItem = item;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(event) {
      // 实现拖拽过程中的逻辑
    },
    stopDrag() {
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
    handleDrop() {
      if (this.draggedItem) {
        // 处理拖放逻辑
      }
    }
  }
}
</script>

注意事项

• 使用原生拖放 API 时，需要调用 event.preventDefault() 来阻止默认行为。
• Vue.Draggable 适用于列表排序场景，功能强大且易于使用。
• 自定义拖放实现灵活度高，但需要处理更多细节。

以上方法可以根据具体需求选择适合的方式实现拖放功能。