Vue3使用vuedraggable實現(xiàn)拖拽排序功能實例代碼
更新時間：2026年02月11日 10:17:21 作者：琦遇
vuedraggable是一個基于Sortable.js的Vue.js拖拽排序插件,提供簡單、靈活且強大的拖拽功能,支持Vue2和Vue3,這篇文章主要介紹了Vue3使用vuedraggable實現(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ù)組，拖拽后自動更新順序 |
?item-key? | String | 每個 item 的唯一 key |
?tag? | String | 渲染的容器標簽，默認div? |
?group? | String/Object | 分組設(shè)置，支持跨列表拖拽 |
?disabled? | Boolean | 是否禁用拖拽 |
?handle? | String | 拖拽手柄選擇器 |
?animation? | Number | 拖拽的動畫過渡時間 |
事件名
| 事件名 | 說明 | 參數(shù) |
|---|---|---|
?@start? | 拖拽開始 | ?event? |
?@end? | 拖拽完成 | ?event? |
?@change? | 列表順序發(fā)生變化 | ?{ moved: { oldIndex, newIndex } }? |
?@add? | 從別的列表添加到當前 | ?event? |
?@remove? | 當前列表被移除元素 | ?event? |
實戰(zhàn)進階場景
拖拽手柄限制（只能通過圖標拖動）
<draggable v-model="list" item-key="id" handle=".sort-icon">
<template #item="{ element }">
<div>
<span class="sort-icon">?</span>
{{ element.name }}
</div>
</template>
</draggable>
禁用某項拖動
<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>
也可以使用對象方式更靈活控制：
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>
常見問題排查
拖不動？
- 是否設(shè)置了
item-key? - 是否被 CSS 覆蓋了事件（例如 overflow、position）
- 是否啟用了
disabled? 屬性
- 是否設(shè)置了
拖動異常（閃爍/跳動）？
- 確保子項具有穩(wěn)定的
key? - 不要在拖拽中操作 DOM
- 確保子項具有穩(wěn)定的
樣式塌陷？
- 添加必要的
min-height?、border? 保持布局正常
- 添加必要的
總結(jié)
到此這篇關(guān)于Vue3使用vuedraggable實現(xiàn)拖拽排序功能的文章就介紹到這了,更多相關(guān)Vue3 vuedraggable拖拽排序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
el-descriptions引入代碼中l(wèi)abel不生效問題及解決
這篇文章主要介紹了el-descriptions引入代碼中l(wèi)abel不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue計算屬性computed與方法methods的區(qū)別及說明
這篇文章主要介紹了Vue計算屬性computed與方法methods的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
最近在項目中使用了ElementUI的el-autocomplete,下面這篇文章主要介紹了vue中el-autocomplete支持分頁上拉加載功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue.js?前端路由和異步組件介紹，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要給大家介紹了關(guān)于Vue項目中使用jquery的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
在Vue3中實現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例
Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢吸引了大量開發(fā)者,在開發(fā)過程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細講解在Vue3中如何實現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過具體示例代碼使概念更加清晰2024-07-07
使用Vue+MySQL實現(xiàn)登錄注冊的實戰(zhàn)案例
第一次用Vue+MySQL實現(xiàn)注冊登錄功能,就已經(jīng)踩了很多坑,下面這篇文章主要給大家介紹了關(guān)于使用Vue+MySQL實現(xiàn)登錄注冊案例的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue 命名視圖的相關(guān)知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue3+Vite實現(xiàn)項目搭建步驟,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
VueAwesomeSwiper在VUE中的使用以及遇到的一些問題
這篇文章主要介紹了VueAwesomeSwiper在VUE中的使用以及遇到的一些問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01