1. 程式人生 > >vue專案中加入拖放排序功能

vue專案中加入拖放排序功能

 

1、下載:npm install vuedraggable

2、引入:import draggable from 'vuedraggable'

 

3、註冊元件:components:{ draggable }

4、頁面元件:

<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>

5、data中加上myArray陣列,自己加一些資料

現在就可以拖拽了,只是有個小問題,在移動端需要加個把手拖動,不然拖動會和頁面的滑動事件衝突

最後在vuedraggable.js原始碼裡找了半天也沒解決,結果發現在sortable.js的文件中給option再加個handel屬性就可以了

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

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

還有很多屬性見https://segmentfault.com/a/1190000008209715