Vue.js 3跨章节事件拖拽重排的适配库咨询

针对你需要实现的跨章节拖拽事件重排需求（包括将某章节首个事件拖至上一章节末尾），推荐以下几个适配Vue 3的拖拽库，均基于成熟的拖拽生态或原生Vue实现，可完全替代jQuery Sortable：

1. Vue.Draggable.next（最推荐，开箱即用） #

这是官方维护的Vue 3版本拖拽组件，底层基于Sortable.js，完全适配Vue响应式数据，组件化写法友好，无需手动操作DOM。

核心用法： #

1. 安装依赖：

npm install vuedraggable@next

2. 组件内实现章节-事件结构：

<template>
  <div class="chapter-list">
    <div v-for="(chapter, chapterIndex) in chapters" :key="chapter.id" class="chapter">
      <h3>{{ chapter.title }}</h3>
      <!-- 所有章节的事件列表共享同一个拖拽分组 -->
      <draggable
        v-model="chapter.events"
        :group="{ name: 'event-group', pull: true, put: true }"
        item-key="id"
        @end="handleDragEnd($event, chapterIndex)"
      >
        <template #item="{ element }">
          <div class="event-item">{{ element.name }}</div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import draggable from 'vuedraggable'

// 模拟章节数据
const chapters = ref([
  {
    id: 1,
    title: 'Chapter 1',
    events: [{ id: 1, name: 'Event 1' }, { id: 2, name: 'Event 2' }]
  },
  {
    id: 2,
    title: 'Chapter 2',
    events: [{ id: 6, name: 'Event 6' }, { id: 7, name: 'Event 7' }]
  }
])

// 拖拽结束后的自定义逻辑（比如处理空章节）
const handleDragEnd = (evt) => {
  console.log('拖拽完成', evt)
}
</script>

通过group配置让所有事件列表属于同一分组，即可直接实现跨章节拖拽，包括将某章节首个事件拖到上一章节末尾的场景，数据会自动同步到Vue响应式变量中。

2. Sortable.js 原生配合Vue 3指令 #

如果你更倾向于直接使用原生Sortable.js（和你找到的jQuery版本同源），可以通过Vue 3自定义指令封装，灵活性更高，适合高度自定义拖拽行为的场景。

核心用法： #

1. 安装依赖：

npm install sortablejs

2. 自定义指令实现：

<template>
  <div class="chapter-list">
    <div 
      v-for="chapter in chapters" 
      :key="chapter.id" 
      class="chapter"
      :data-chapter-id="chapter.id"
    >
      <h3>{{ chapter.title }}</h3>
      <div 
        class="event-list"
        v-sortable="{ 
          group: 'event-group',
          onEnd: (evt) => handleDragEnd(evt, chapter) 
        }"
      >
        <div 
          v-for="event in chapter.events" 
          :key="event.id" 
          class="event-item"
        >
          {{ event.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, directive } from 'vue'
import Sortable from 'sortablejs'

const chapters = ref([
  // 同上面的模拟数据
])

// 自定义v-sortable指令
const sortable = directive((el, binding) => {
  Sortable.create(el, {
    group: binding.value.group,
    onEnd: binding.value.onEnd,
    animation: 150 // 拖拽动画时长
  })
})

// 手动同步DOM拖拽结果到响应式数据
const handleDragEnd = (evt, sourceChapter) => {
  const targetChapter = chapters.value.find(ch => 
    ch.id === parseInt(evt.to.closest('.chapter').dataset.chapterId)
  )
  // 移除源章节的事件，插入到目标章节对应位置
  const movedEvent = sourceChapter.events.splice(evt.oldIndex, 1)[0]
  targetChapter.events.splice(evt.newIndex, 0, movedEvent)
}
</script>

3. @vueuse/use-sortable（组合式API友好） #

VueUse生态中的拖拽工具，基于Sortable.js封装，适合使用Vue 3组合式API的项目，写法轻量化。

核心用法： #

1. 安装依赖：

npm install @vueuse/core sortablejs

2. 组件内使用：

<template>
  <div class="chapter-list">
    <div v-for="chapter in chapters" :key="chapter.id" class="chapter">
      <h3>{{ chapter.title }}</h3>
      <div ref="eventListRef" class="event-list">
        <div 
          v-for="event in chapter.events" 
          :key="event.id" 
          class="event-item"
        >
          {{ event.name }}
        </div>
      </div>
    </div>
  </div>
</template>

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

const chapters = ref([
  // 同模拟数据
])

// 为每个章节的事件列表初始化拖拽
chapters.value.forEach(chapter => {
  const eventListRef = ref(null)
  useSortable(eventListRef, {
    group: 'event-group',
    onEnd: (evt) => {
      // 同步数据逻辑同Sortable.js原生方式
    }
  })
})
</script>

选型建议： #

• 优先选Vue.Draggable.next：组件化封装，无需手动处理DOM和数据同步，最适合快速实现需求。
• 若需要高度自定义拖拽逻辑，选Sortable.js原生+自定义指令或**@vueuse/use-sortable**。

内容的提问来源于stack exchange，提问作者guyaloni