第一步，安装插件

npm i -S vuedraggable

第二步，组件中先引入

import draggable from 'vuedraggable' 

components:{draggable}

第三步，页面中使用

// 原理：用draggable包裹要拖拽的图片列表
    <draggable
      v-model="uploadFileList" //跟遍历显示的图片绑定的是同一个数组
      @update="updateList" //拖拽变换位置时触发的事件
    >
      <div
        class="el-upload-list__item"
        v-for="(item, index) in uploadFileList"
        :key="index"
      >
        <img
          :src="item.url"
          class="el-upload-list__item-thumbnail"
        >
      </div>
    </draggable>
    

第四步，逻辑处理

// 拖拽事件会自动将数组中元素的位置跟着图片的位置进行移动，在updateList事件中可获取到位置变换后的数组
updateList（）{
    console.log(this.uploadFileList)
}