vue项目中做div拖动互换位置

使用场景。VUE项目中的元素拖拽。后台管理系统的首页图表中比较常见

效果图：
div的拖拽互换位置

插件vuedraggable（版本：^2.23.2）；vue-cli（版本：2x）

使用步骤:

第一步：下载

npm(cnpm) install vuedraggable --save

第二步：引入，注册。

在你要使用拖拽元素互换位置的地方引入依赖。并将其注册为组件
![引入和注册](https://img-blog.csdnimg.cn/20191115165958964.jpg)

第三步：数据的定义和使用

情况一：如果拖拽的子元素个数是由后台数据决定的。
![这里的item就是你后台请求的数据](https://img-blog.csdnimg.cn/2019111517031711.jpg)；
	使用：
![这里直接循环渲染列表数据即可](https://img-blog.csdnimg.cn/20191115170355873.jpg)
情况二：如过拖拽的子元素个数是由前端决定的。
![这里自己定义一个数组对象。个数是你要拖拽的div个数](https://img-blog.csdnimg.cn/20191115170719369.jpg)
	使用：
	![这里是html中的使用方法](https://img-blog.csdnimg.cn/20191115171328821.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDc2MjE5,size_16,color_FFFFFF,t_70)

注意：这里的key不能绑定为index,如果绑定了index，会导致拖动的时候只能拖动div,而不能拖动div里面的内容。比如echarts等。原因未知。