vue - 实现图片拖拽效果

- 日理万妓 2021-09-30 10:50 574阅读 0赞

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

##### [github地址][github]：https://github.com/sunshime/comPackage #####

### 效果图：![在这里插入图片描述][20191018163735782.gif] ###

#### 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%;
    }

[github]: https://github.com/sunshime/comPackage
[20191018163735782.gif]: /images/20210812/3c9d4cdadc514438b04f151e681f9316.png