vue实现列表拖拽

Vue 实现列表拖拽的方法

在 Vue 中实现列表拖拽功能，可以通过原生 HTML5 的拖放 API 或使用第三方库如 vuedraggable。以下是两种常见的方法：

使用 HTML5 拖放 API

HTML5 提供了原生的拖放 API，可以通过监听拖放事件实现列表拖拽功能。

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

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

使用 vuedraggable 库

vuedraggable 是一个基于 Sortable.js 的 Vue 拖拽库，使用起来更加简单高效。

安装依赖：

npm install vuedraggable

使用示例：

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

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成', this.list);
    }
  }
};
</script>

注意事项

• 使用 HTML5 拖放 API 时，需要手动处理拖拽逻辑，适合简单场景。
• vuedraggable 提供了更多高级功能，如动画、拖拽手柄等，适合复杂场景。
• 在移动端使用时，可能需要额外处理触摸事件。

两种方法均可实现列表拖拽功能，根据项目需求选择合适的方式。