vue图片拖动 利用vuedraggable依赖（结合element图片上传）

直接代码

1.安装： 
npm i vuedraggable 或 yarn add vuedraggable

2.
引入：
import Draggable from 'vuedraggable'
注册
components: {
  Draggable
}

需要自己写图片上传的图片列表，不能使用elment/iview图片上传自带的

3.
使用：
<!--@update 拖动有更新 comImageArr 图片列表-->
<Draggable v-model="comImageArr" @update="onMoveCallback">
  <transition-group class="menuimgupload-list-box">
    <div class="items-box" v-for="(items, index) in comImageArr" :key="index">
      <img class="items-img" :src="items" />
      <div class="mask">
        <p class="mask-con">
          <Icon
            type="ios-eye-outline"
            size="20"
            color="#fff"
            class="icon"
            @click="handleView(index)" // 小眼睛 查看大图
          ></Icon>
          <Icon
            v-if="control"
            type="ios-trash-outline"
            size="20"
            color="#fff"
            class="icon"
            @click="handleRemove(index)" // 删除图片
          ></Icon>
        </p>
      </div>
    </div>
  </transition-group>
</Draggable>


methods: {
onMoveCallback () {
    // 我这里是一个图片上传的组件，虽然Draggable做了双向绑定，帮我更新了comImageArr 但是我要还告诉父组件更新 所以我需要这个事件
    // handleRemove/handleView这个事件我就不放了
  }
}

// 如果想快速看一下可以复制下面的代码
<template>
    <Draggable v-model="comImageArr" @update="onMoveCallback">
      <transition-group class="menuimgupload-list-box" :id="idNames">
        <div class="items-box" v-for="(items, index) in comImageArr" :key="index">
          <img class="items-img" :src="items" />
          <div class="mask">
            <p class="mask-con">
              <Icon
                type="ios-eye-outline"
                size="20"
                color="#fff"
                class="icon"
                @click="handleView(index)"
              ></Icon>
              <Icon
                type="ios-trash-outline"
                size="20"
                color="#fff"
                class="icon"
                @click="handleRemove(index)"
              ></Icon>
            </p>
          </div>
        </div>
    </transition-group>
    </Draggable>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import Draggable from 'vuedraggable'
function RndNum(n){
  var rnd=""
  for (var i=0;  i<n; i++)  {
    rnd += Math.floor(Math.random() * 10)
  }
  return rnd
}
export default {
  components: {
    Draggable
  },
  name: 'newImgUpload',
  data () {
    return {
      idNames: 'box',
      comImageArr: ['https://sdcms-1253457213.file.myqcloud.com/content/9ad289110e4eee4052a733b67ffd2a36','https://sdcms-1253457213.file.myqcloud.com/content/4a9060bf3b19a8bb61f458a7ce83467a']
    }
  },
  created () {
    this.idNames = this.idNames + RndNum(4)
  },
  methods: {
    onMoveCallback () {
      this.$emit(
        'onUploadImage',
        this.comImageArr
      )
    },
    handleView (index) {
      const viewer = new Viewer(document.getElementById(this.idNames), {
        initialViewIndex: index,
        title: false,
        navbar: false,
        hidden: function () {
          viewer.destroy()
        }
      })
      viewer.show()
    }
  }
}
</script>

<style lang="less" scoped>
.menuimgupload-list-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;

  .items-box {
    width: 140px;
    height: 80px;
    position: relative;
    margin-right: 6px;
    margin-bottom: 6px;
    border-radius: 4px;
    overflow: hidden;

    .mask {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      .mask-con {
        height: 20px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon {
          &:first-child {
            margin-right: 15px;
            // width: 32px;
            // height: 32px;
          }
        }
      }
    }

    .items-img {
      width: 140px;
      height: 80px;
      border-radius: 4px;
    }
  }
  .items-box:hover {
    .mask {
      display: block;
    }
  }
}
</style>

如果使用 import Viewer from 'viewerjs’他预览的，有一个值得注意的地方，当一个页面同时有几个预览的时候
new Viewer(document.getElementById(‘这个id不能写死’)）
要么写个随机id，要么在viewer隐藏时触发的
hidden: function () {
移除上面创建的id
}