1，安装使用

yarn add vuedraggable

npm i -S vuedraggable

2、使用方式：

      由于项目中需要图片集合和其他数据一起并发上传，所以goodsImgList为upload上传的本地图片路径集合 

      在上传之前拖拽移动的都是本地数据，在上传数据时使用promise即可
 

<el-form-item
        class="draggableVue"
        label="商品图 （拖动可调整顺序，主图默认第一张，最多9张）"
      >
        <draggable
          style=" display: flex;"
          v-model="goodsImgList"
          @change="changeImages"
        >
        <!-- 由于项目中需要图片集合和其他数据一起并发上传，所以goodsImgList为upload上传的本地图片路径集合 -->
        <!-- 在上传之前拖拽移动的都是本地数据，在上传数据时使用promise即可， -->
          <div class="spl" v-for="(item, index) in goodsImgList" :key="index">
            <img :src="item.url" alt="" />
            
            <div class="uploadText" @click="uploadTextRem(index)">X</div>
          </div>
        </draggable>

        <el-upload
          class="product-uploader"
          action
          :on-success="successGoodsUpload"
          :multiple="true"
          :limit="9"
          :auto-upload="false"
          :before-upload="beforeGoodsUpload"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-change="handleChange"
          accept=".jpg, .jpeg, .png, .gif, .JPG, .JPEG, .PNG, .GIF"
          :show-file-list="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>


 data() {
    return {
      goodsImgList: []
    };
  },

3，事件

// 这里是拖拽后的排序，有需要零星修改即可
    changeImages(e) {
      console.log(this.goodsImgList);
    },
！！！在调用上传接口之后（关闭组件时需要将下面fileList清空，可能会出现缓存的清况）！！！
 // 上传商品图片 upload上传触发的事件
    handleChange(file, fileList) {
      this.goodsImgList = fileList;
      console.log( this.goodsImgList);
    },
//删除某一个 根据索引删除即可
 uploadTextRem(index) {
      this.goodsImgList.splice(
        this.goodsImgList.findIndex((a, e) => e === index),
        1
      );
    },

 样式自行修改 如有其他需要，参考官方文档即可