詳解vue項目中使用vuedraggable

最近在學習一個可視化搭建的項目,裡面用的拖拽就是draggable.js。看瞭幾個中文的文檔,有很多坑,可能是沒有及時更新的原因。

VUe 

建議去看vuedraggable的官方文檔,隻不過是英文的。官方文檔:https://github.com/SortableJS/Vue.Draggable;

由於vue3已經是默認版本瞭,所以vuedraggable也對應vue2.0和3.0有各自的版本,直接使用基本命令安裝:

npm install vuedraggable --save

會默認安裝2.1左右的版本,由於我的項目是vue3構建的,所以會報錯:

就是draggable版本不對,導致錯誤,版本換位4.1.0的就解決瞭

npm i [email protected] --save 或 yarn add [email protected]

在官網裡專門對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中,這樣寫是有問題的,官網提示:

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時,現在應該使用tag和componentData來創建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中需要將裡面的參數單獨進行配置,如::group="{name: 'article',pull:'clone'}"     :sort='false'  等。

到此這篇關於vue項目中使用vuedraggable的文章就介紹到這瞭,更多相關vue使用vuedraggable內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: