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 => {
      //此处是拖动完成后鼠标松开时触发的事件
    });
  }