vue - 实现图片拖拽效果

  下面我来分享一下如何实现图片多拽，在文章的尾部加上实现的案例。

github地址：https://github.com/sunshime/comPackage

效果图：

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---->", val);
    })
   this.$dragging.$on('dragend', (val) => {
	 //此处是拖动完成后鼠标松开时触发的事件
	  console.log("val---111->", val);
   })
}

5、使用案例：

（1）html文件

<template>
  <div class="masterimage">
    <div class="content">
      <div class="small-picture">
        <p>图片可拖拽排序</p>
        <ul class="pc-show">
          <li
            class="showpc"
            v-for="(item,index) in imgList"
            :key="index"
            v-dragging="{ item: item, list: masterImgList, group: 'index' }"
            :style="'height:'+heighting+'px'"
          >
            <div>
              <div class="picture">
                <img :src="item" :style="'height:'+heighting+'px'" alt />
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

（2）js文件

export default {
  data() {
    return {
      imgList: [
        "http://img1.imgtn.bdimg.com/it/u=209805106,3265813767&fm=26&gp=0.jpg",
        "http://img4.imgtn.bdimg.com/it/u=3275408412,2382302438&fm=26&gp=0.jpg",
        "http://img4.imgtn.bdimg.com/it/u=3595217016,1106968040&fm=26&gp=0.jpg"
      ]
    };
  },
  mounted() {
    // 拖拽图片
    this.$dragging.$on("dragged", val => {
      console.log("val---->", val);
    });
    this.$dragging.$on("dragend", val => {
      //此处是拖动完成后鼠标松开时触发的事件
      console.log("val---111->", val);
    });
  },
  computed: {
    heighting() {
      return window.innerWidth * 0.52;
    }
  }
};

（3）css文件

.masterimage {
  position: relative;
  background-color: #fff;
}
.masterimage .content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.masterimage .content .small-picture {
  padding-top: 0.512rem;
}
.masterimage .content .small-picture p {
  line-height: 0.704rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #999999;
}
.masterimage .content .small-picture p {
  font-size: 0.512rem;
}
.masterimage .content .small-picture p {
  padding-bottom: 0.21333333rem;
}
.masterimage .content .small-picture .pc-show {
  display: flex;
  flex-wrap: wrap;
}
.masterimage .content .small-picture .pc-show .showpc {
  margin-right: 0.29866667rem;
  margin-top: 0.29866667rem;
  background: #f5f7fa;
  width: 100%;
}