vue实现数据拖动

Vue 实现数据拖动

在 Vue 中实现数据拖动通常涉及使用 HTML5 的拖放 API 或第三方库如 vuedraggable。以下是两种方法的详细实现方式。

使用 HTML5 拖放 API

HTML5 拖放 API 提供原生支持，适合简单场景。

模板部分

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

脚本部分

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

使用 vuedraggable 库

vuedraggable 是基于 Sortable.js 的 Vue 组件，提供更丰富的功能。

安装依赖

npm install vuedraggable

模板部分

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

注意事项

• 性能优化：对于大型列表，使用 v-for 时添加 :key 以提高性能。
• 跨组件拖动：vuedraggable 支持跨组件拖动，需配置 group 属性。
• 移动端支持：部分移动端浏览器可能需要额外处理触摸事件。

以上方法可根据项目需求选择，简单场景用原生 API，复杂场景推荐 vuedraggable。