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