前端

Appearance

Vue3 拖拽库 ​

常用拖拽库 ​

1. Vue Draggable ​

2. vuedraggable Plus ​

3. Vue Use Draggable ​

4. SortableJS ​

5. react-dnd (在Vue3中使用) ​

6. @dnd-kit/core ​

7. vuedraggable-next ​

8. vue-draggable-resizable ​

9. vuedraggable-ghost ​

10. vue-drag-drop ​

11. vue-draggable-nuxt ​

12. vue3-draggable-plus ​

13. vue3-draggable-grid ​

14. vue3-draggable-dialog ​

15. vue3-draggable-kanban ​

使用示例 ​

Vue Draggable 基本使用 ​

vue
<template>
  <div>
    <draggable v-model="list">
      <div v-for="item in list" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'

const list = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
])
</script>

选择建议 ​

  • 简单列表拖拽：推荐使用 Vue Draggable
  • 复杂拖拽场景：推荐使用 @dnd-kit/core 或 vuedraggable Plus
  • 需要树形结构拖拽：推荐使用 vuedraggable Plus 或 vuedraggable-next
  • 需要高性能：推荐使用 SortableJS
  • 喜欢现代化API：推荐使用 @dnd-kit/core