vue - 实现图片拖拽效果

1.安装依赖包

npm install awe-dnd --save

2.main.js文件（全局）引入

// 拖拽
import VueDND from 'awe-dnd';
Vue.use(VueDND);

3.在使用图片拖拽的页面对应的循环的标签加上以下代码：

v-dragging="{ item: item, list: masterImgList, group: 'index' }"

4.在mounted中加上以下代码

mounted(){
this.$dragging.$on('dragged', (val) => {
console.log(val);
})
this.$dragging.$on('dragend', (val) => {
//此处是拖动完成后鼠标松开时触发的事件
})
}

使用例子：

<li
class="showpc"
v-for="(item,index) in masterImgList"
:key="index"
v-dragging="{ item: item, list: masterImgList, group: 'index' }"
:style="'height:'+heighting+'px'"
@click="checkItem(index)"
>
<div class="mask" v-if="index==0"></div>
<div :class="{active:index==isActive}" v-show="item!==''">
<div class="picture">
<img :src="item" :style="'height:'+heighting+'px'" alt @click="getIndex(item)">
</div>
</div>
</li>

mounted() {
// 拖拽图片
this.$dragging.$on("dragged", val => {});
this.$dragging.$on("dragend", val => {
//此处是拖动完成后鼠标松开时触发的事件
});
}