專案中遇到一個需求； 電商管理平臺新增商品的時候需要上傳或者選擇商品輪播圖展示的圖片，這裡涉及到圖片的排序問題；一開始只能自己寫了一個點選左移或者右移的效果； 後面找到這個元件，能非常簡單的實現拖動排序的效果

1. 安裝依賴包

npm install awe-dnd --save

2. 全域性引入

import VueDND from 'awe-dnd'

Vue.use(VueDND)

3. 元件中使用

<template>
     <div v-for="item,index in form.detail" v-dragging="{ item: item, list: form.detail, group: 'detail' }" class="form_img">
</template>

mounted(){
		this.$dragging.$on('dragged', (val) => {
		      console.log(this.form.detail)//這裡我們不需要做任何操作；元件內部會把我們繫結上去的list自動排序;只需要檢視結果就可以
		      //如果需要在這裡進行其他操作，可以檢視val的內容，包括：拖動的元素，拖動後與之兌換的元素，以及原始資料和拖動組名
		    })
		    this.$dragging.$on('dragend', (val) => {
		        //此處是拖動完成後滑鼠鬆開時觸發的事件
		    })
}
 

測試過橫向縱向，浮動排列和flex佈局都能夠實現效果