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-upload
      ref="upload"
      :action="$http.adornUrl('/admin/file/upload/element')"
      :headers="{ Authorization: $cookie.get('Authorization') }"
      list-type="picture-card"
      :file-list="fileList"
      :limit="6"
      :on-success="handleSuccess"
      :before-upload="beforeAvatarUpload"
      :on-progress="uploadFileProcess"
      :on-remove="fileRemove"
      :on-exceed="handleExceed"
      :on-preview="handlePreview"
  >
    <i slot="default" class="el-icon-plus"></i>
    <div slot="tip" class="explanatory">
      *游戏主图直接影响游戏在平台的曝光引流效果，低画质图片无法获得平台免费推荐机制，图片上传规范要求
      仅支持png、jpg、jpeg格式，建议宽高比例为3:4(至少600*800px)，大小5M以内，可拖拽主图调整顺序
    </div>
  </el-upload>
</div>
</el-form-item>

JS部分

mounted () {
this.$nextTick(() => {
  this.initDragSort()
})
},
initDragSort () {
  // 支持拖拽排序
  const el = this.$refs.upload.$el.querySelectorAll('.el-upload-list')[0]
  console.log(el, '拖拽排序')
  Sortable.create(el, {
    onEnd: ({ oldIndex, newIndex }) => {
      // 交换位置
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
    }
  })
},

拖动是拖动了，但数据和视图完全各是各的，没有毛关系。。。

还能怎么了，接着改呗。。。仔细观察后发现，数据的顺序是对的，视图是乱的，抽象！真抽1象！

直接说出解决办法：在onEnd内手动赋一次值，解决视图更新乱的问题。

onEnd: ({ oldIndex, newIndex }) => {
  // 交换位置
  const arr = JSON.parse(JSON.stringify(this.fileList))
  const page = arr[oldIndex]
  arr.splice(oldIndex, 1)
  arr.splice(newIndex, 0, page)
  this.dataForm.gamePic = arr
}

自此本期使用到sortablejs插件，完结撒花~