1.剛做的需求，需要在商品編輯的時候對商品圖片以及商品詳情圖進行一個拖拽排序的功能
2.在vue中 首先安裝依賴
1.npm install awe-dnd --save
2.我們公司用的是yarn管理的所以有點不一樣
yarn add awe-dnd
yarn install
3.這樣依賴就安裝好了，在使用的時候也很簡單
在main.js 中引入 並暴露出來
import VueDND from 'awe-dnd'
Vue.use(VueDND)
4.然后我們在項目中就可以去使用了
這里以我做的項目為例
<template>
<div v-for="(item, index) in info.image" v-dragging="{ list: info.image, item: item, group: 'image' }" :key="index">
<img :src=" + item + '" alt="">
</div>
<div v-for="(item, index) in info.
img_details" v-dragging="{ list: info.
img_details, item: item, group: '
imgDetails' }" :key="index">
<img :src=" + item + '" alt="">
</div>
</template>
<script>
data() {
return {
info: {
img_details: [],
image: []
},
}
},
mounted() {
this.$dragging.$on('dragged', (value) => {
//因為我這在排序的時候不需要做處理，所以空着就行
})
}
</script>
這里給大家說明下：image，和img_details 是獲取的數據所以這里沒有寫，
說一下踩過的小坑，我這個頁面有兩個地方用到拖拽所以當時沒有去用group屬性所以不論怎么該只有一個生效，
看了官網才知道這個屬性是 “group可拖動列表的唯一鍵“ 這是翻譯過來的，所以我們可以通過定義不同的值來實現多個拖拽功能
如果大家需要看案例效果可以參照：https://www.npmjs.com/package/awe-dnd