vue使用vuedraggable拖拽排序

一、安装vuedraggable
npm install vuedraggable --save

二、 页面中使用

js部分：

1）引入：import draggable from 'vuedraggable';

2）使用组件：components: {draggable},

3）拖拽方法（根据结构自定义）：

dragSort(e) {
		 	// e.newIndex 为draggable插件给的值
		   this.darkCarImgs[e.newIndex].sort = e.newIndex+1;
		   
		   // 重新排序
		   this.darkCarImgs.map((item,index)=> {
		        item.sort = index+1;
		    })
		 },

html部分（transition-group 为拖拽部分）：

<draggable element="div" v-model="darkCarImgs" @sort="dragSort" v-if="venueType==0">
// 拖拽图片外层嵌套 transition-group
 <transition-group*** class="flex_left_wrap">
 // 内容按需定义
  <div class="dragImgBox" v-for="(item, index) in darkCarImgs" :key="index">
    <img :src="item.imgPath" class="dragImg" :draggable="true" />
    <div class="corner">{{item.sort}}</div>
  </div>
 </transition-group>
</draggable>