快捷導(dǎo)航

Vue3使用vuedraggable實(shí)現(xiàn)拖拽排序功能實(shí)例代碼

更新時(shí)間：2026年02月11日 10:17:21 作者：琦遇

vuedraggable是一個(gè)基于Sortable.js的Vue.js拖拽排序插件,提供簡(jiǎn)單、靈活且強(qiáng)大的拖拽功能,支持Vue2和Vue3,這篇文章主要介紹了Vue3使用vuedraggable實(shí)現(xiàn)拖拽排序功能的相關(guān)資料,需要的朋友可以參考下

安裝依賴

npm install vuedraggable@next

引入組件

import draggable from 'vuedraggable'

基礎(chǔ)用法

<template>
    <draggable v-model="innerList" item-key="props" handle=".sort-icon" :disabled="false" :animation="300">
        <template #item="{ element }">
            <div class="flexAlign">
                <div class="sort-icon" style="margin-right: 5px;cursor: pointer;font-size: 18px;">?</div>
                {{ element.label }}
            </div>
        </template>
    </draggable>
</template>

<script setup>
    import draggable from 'vuedraggable';
    const innerList = ref([
        {label:"名稱"}
    ])
</script>

常用屬性說明

屬性名	類型	說明
?`v-model`?	Array	綁定數(shù)組，拖拽后自動(dòng)更新順序
?`item-key`?	String	每個(gè) item 的唯一 key
?`tag`?	String	渲染的容器標(biāo)簽，默認(rèn)`div`?
?`group`?	String/Object	分組設(shè)置，支持跨列表拖拽
?`disabled`?	Boolean	是否禁用拖拽
?`handle`?	String	拖拽手柄選擇器
?`animation`?	Number	拖拽的動(dòng)畫過渡時(shí)間

事件名

事件名	說明	參數(shù)
?`@start`?	拖拽開始	?`event`?
?`@end`?	拖拽完成	?`event`?
?`@change`?	列表順序發(fā)生變化	?`{ moved: { oldIndex, newIndex } }`?
?`@add`?	從別的列表添加到當(dāng)前	?`event`?
?`@remove`?	當(dāng)前列表被移除元素	?`event`?

實(shí)戰(zhàn)進(jìn)階場(chǎng)景

拖拽手柄限制（只能通過圖標(biāo)拖動(dòng)）

<draggable v-model="list" item-key="id" handle=".sort-icon">
  <template #item="{ element }">
    <div>
      <span class="sort-icon">?</span>
      {{ element.name }}
    </div>
  </template>
</draggable>

禁用某項(xiàng)拖動(dòng)

<draggable v-model="list" item-key="id" :move="checkMove" @change="logChange">
</draggable>

<script setup>
const checkMove = (e) => {
  return !e.draggedContext.element.fixed
}
const logChange = (e) => console.log(e)
</script>

跨列表拖拽

<draggable v-model="list1" item-key="id" group="all">
  ...
</draggable>

<draggable v-model="list2" item-key="id" group="all">
  ...
</draggable>

也可以使用對(duì)象方式更靈活控制：

group="{ name: 'all', pull: true, put: true }"

嵌套拖拽（如樹形結(jié)構(gòu)）

<draggable v-model="tabList" item-key="id">
  <template #item="{ element }">
    <div>{{ element.name }}</div>
    <draggable
      v-if="element.children"
      v-model="element.children"
      item-key="id"
      :group="{ name: 'all' }"
    >
      <template #item="{ element }">
        <div class="child">{{ element.name }}</div>
      </template>
    </draggable>
  </template>
</draggable>

示例：拖拽后保存順序

<el-button @click="save">保存順序</el-button>
<draggable v-model="list" item-key="id" @end="save" />

<script setup>
const save = () => {
  console.log('新順序:', list.value.map(i => i.id))
}
</script>

常見問題排查

拖不動(dòng)？
- 是否設(shè)置了 item-key?
- 是否被 CSS 覆蓋了事件（例如 overflow、position）
- 是否啟用了 disabled? 屬性
拖動(dòng)異常（閃爍/跳動(dòng)）？
- 確保子項(xiàng)具有穩(wěn)定的 key?
- 不要在拖拽中操作 DOM
樣式塌陷？
- 添加必要的 min-height?、border? 保持布局正常

總結(jié)

到此這篇關(guān)于Vue3使用vuedraggable實(shí)現(xiàn)拖拽排序功能的文章就介紹到這了,更多相關(guān)Vue3 vuedraggable拖拽排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: