詳解vue項目中使用vuedraggable
最近在學習一個可視化搭建的項目，里面用的拖拽就是draggable.js。看了幾個中文的文檔，有很多坑，可能是沒有及時更新的原因。
VUe
建議去看vuedraggable的官方文檔，只不過是英文的。官方文檔：https://github.com/SortableJS/Vue.Draggable；
由于vue3已經(jīng)是默認版本了，所以vuedraggable也對應vue2.0和3.0有各自的版本，直接使用基本命令安裝：
npm install vuedraggable --save
會默認安裝2.1左右的版本，由于我的項目是vue3構建的，所以會報錯：
就是draggable版本不對，導致錯誤，版本換位4.1.0的就解決了
npm i vuedraggable@4.1.0 --save 或 yarn add vuedraggable@4.1.0
在官網(wǎng)里專門對vue版本的不同做了對應的解釋，在vue2中，
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>//.vue file:
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
...With transition-group:
<draggable v-model="myArray">
<transition-group>
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>而在vue3中，這樣寫是有問題的，官網(wǎng)提示：
Breaking changes:
Use item slot instead of default to display elements#使用項目槽而不是默認值來顯示元素Provide a key for items using itemKey props#使用itemKey道具為物品提供密鑰
變動確實挺大的，寫法如下：
From:
<!-- vue 2 version -->
<draggable v-model="myArray">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>To:
<draggable v-model="myArray" item-key="id">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>當使用transition時，現(xiàn)在應該使用tag和componentData來創(chuàng)建transition
From
<!-- vue 2 version -->
<draggable v-model="myArray">
<transition-group name="fade">
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>to
<draggable v-model="myArray" tag="transition-group" :component-data="{name:'fade'}">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>注：在進行clone時，vue2.x版本Draggable 組件中的配置項寫法（:options="{group:{name: 'article',pull:'clone'}, sort: false}"）在vue3中不起效，
vue3中需要將里面的參數(shù)單獨進行配置，如：:group="{name: 'article',pull:'clone'}" :sort='false' 等。
到此這篇關于vue項目中使用vuedraggable的文章就介紹到這了,更多相關vue使用vuedraggable內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React組件通信之路由傳參(react-router-dom)
本文主要介紹了React組件通信之路由傳參(react-router-dom)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vant-ui AddressEdit地址編輯和van-area的用法說明
這篇文章主要介紹了vant-ui AddressEdit地址編輯和van-area的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
uni-app 使用編輯器創(chuàng)建vue3 項目并且運行的操作方法
這篇文章主要介紹了uni-app 使用編輯器創(chuàng)建vue3 項目并且運行的操作方法,目前uniapp 創(chuàng)建的vue3支持 vue3.0 -- 3.2版本 也就是說setup語法糖也是支持的，需要的朋友可以參考下2023-01-01
Vuejs仿網(wǎng)易云音樂實現(xiàn)聽歌及搜索功能
這篇文章主要介紹了Vuejs仿網(wǎng)易云音樂實現(xiàn)聽歌及搜索功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了如何在Vue項目中使用vuex問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關于如何基于Vue3實現(xiàn)掃碼槍掃碼并生成二維碼的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了Electron中如何使用SQLite存儲筆記示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
vue中watch和computed的區(qū)別與使用方法
這篇文章主要給大家介紹了關于vue中watch和computed的區(qū)別與使用方法的相關資料，文中通過實例代碼結束的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08
這篇文章主要介紹了vue.js系列中的vue-fontawesome使用,需要的朋友可以參考下2018-02-02
Vue keepAlive 數(shù)據(jù)緩存工具實現(xiàn)返回上一個頁面瀏覽的位置
這篇文章主要介紹了Vue keepAlive 數(shù)據(jù)緩存工具，實現(xiàn)返回上一個頁面瀏覽的位置，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05