Vue项目开发中非常实用的图片拖动排序插件awe-dnd

项目中遇到一个需求；
电商管理平台添加商品的时候需要上传或者选择商品轮播图展示的图片，这里涉及到图片的排序问题；一开始只能自己写了一个点击左移或者右移的效果；
后面找到这个组件，能非常简单的实现拖动排序的效果

1. 安装依赖包

npm install awe-dnd --save

2. 全局引入

import VueDND from 'awe-dnd'

Vue.use(VueDND)

3. 组件中使用

<template>
     <div v-for="item,index in form.detail" v-dragging="{ item: item, list: form.detail, group: 'detail' }" class="form_img">
</template>

mounted(){
		this.$dragging.$on('dragged', (val) => {
		      console.log(this.form.detail)//这里我们不需要做任何操作；组件内部会把我们绑定上去的list自动排序;只需要查看结果就可以
		      //如果需要在这里进行其他操作，可以查看val的内容，包括：拖动的元素，拖动后与之兑换的元素，以及原始数据和拖动组名
		    })
		    this.$dragging.$on('dragend', (val) => {
		        //此处是拖动完成后鼠标松开时触发的事件
		    })
}

测试过横向纵向，浮动排列和flex布局都能够实现效果