vue中使用vuedraggable 实现拖拽

1.yarn add vuedraggable  或者  npm i -S vuedraggable  先引入 vuedraggable  

 

 

2.在需要拖拽的页面引入注册

 

 

3.在页面中使用

?

1 2 3 4 5 6

<!-- 绑定循环出来的数组  chosen-class是拖拽时自定义的样式  force-fallback为开启自定义样式   animation是拖拽速度  update是拖拽完成后的事件--> <draggable v-model="myArray" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @update="ondate">                 <transition-group style="display:flex;width:30vw;flex-wrap:wrap;">                     <div class="item" v-for="(element,index) in myArray" :key="index">{{element.name}}</div>                 </transition-group> </draggable>

　　

4.效果