vue項目中加入拖放排序功能

 

一、下載：npm install vuedraggable

二、引入：import draggable from 'vuedraggable'

 

三、註冊組件：components:{ draggable }

四、頁面組件：

<draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false" class="box">
<div v-for="element in myArray" :key="element.id">
<span class="myHandle">{{element.name}}</span>
<img :src="element.src" />
</div>
</draggable>

五、data中加上myArray數組，本身加一些數據

如今就能夠拖拽了，只是有個小問題，在移動端須要加個把手拖動，否則拖動會和頁面的滑動事件衝突

最後在vuedraggable.js源碼裏找了半天也沒解決，結果發如今sortable.js的文檔中給option再加個handel屬性就能夠了

handle屬性：只有按住拖動手柄才能使列表單元進行拖動

:options="{group:'people',handle:'.myHandle'}"

還有不少屬性見https://segmentfault.com/a/1190000008209715