官方文档

vuedraggable 是基于 Sortable.js 的 Vue 拖拽排序组件，支持列表拖拽排序、跨列表拖拽、拖拽动画等能力，Vue3 版本使用 @next 标签安装。

安装

1
2
3
yarn add vuedraggable@next

npm i -S vuedraggable@next

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <draggable
    :list="state.form_list"
    ghost-class="ghost"
    :force-fallback="true"
    chosen-class="chosenClass"
    animation="200"
    @start="onStart"
    @end="onEnd"
  >
    <template #item="{ element, index }">
      <div class="item_box">{{ element }}{{ index }}</div>
    </template>
  </draggable>
</template>
<script setup lang="ts">
import draggable from "vuedraggable";
import { reactive, onMounted } from "vue";

const state = reactive({
  form_list: [{ title: "肯德基" }, { title: "麦当劳" }],
});
//开始拖拽事件
const onStart = () => {};
//结束拖拽事件
const onEnd = () => {};
onMounted(() => {});
</script>
<style lang="less" scoped></style>

属性说明

属性 说明
list 绑定拖拽排序的数组，拖拽结束后会自动更新顺序
animation 拖拽动画时长（ms）
ghost-class 拖拽时占位元素的 class
chosen-class 被选中元素的 class
force-fallback 强制使用 fallback 拖拽模式（移动端兼容）
@start / @end 拖拽开始 / 结束事件

拖拽结束（@end）后 list 数组顺序已被组件自动更新，直接使用即可，无需手动处理排序逻辑。

示例