vue中使用vuedraggable 实现拖拽

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

 

 

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

 

 

3.在页面中使用

<!-- 绑定循环出来的数组  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.效果