vue2 + element ui + sortablejs实现拖拽图片排序

前言

因为业务对拖拽有着强需求和高要求，我开始了相关尝试，以我目前找到的可选项来说，sortablejs 是最里边最轻量最灵活的。
我的业务场景如下：拖拽图片交换进行排序

sortablejs 是一个用于创建可排序列表的 JavaScript 库。创建可拖放的列表，使用户能够轻松地重新排列项目或元素

1、多列表支持：可以创建多个可排序列表，可以在这些列表之间拖放元素。
2、嵌套列表：支持嵌套列表，可以创建具有层次结构的可排序列表，能够创建树形结构或多级列表。

sortablejs的使用

在打开Sortable官网介绍的时候，脑袋里面的想法是这玩意能救我狗命，里面各种操作和控制都有，充分满足我现在的需求，边看边干。

安装sortablejs

npm install sortable

vue导入

import Sortable from 'sortablejs'

开始使用

<el-form-item
  label="游戏主图封面"
  label-width="110px"
  prop="gamePic"
  :rules="[{ required: true, message: '请上传游戏游戏主图封面' }]"
  style="margin-bottom: 28px"
>
<div class="avatar-uploader">
  <el-uplo