vue中基于sortablejs与el-upload实现文件上传后拖拽排序

今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做，赶紧加上

之前别的同事基于 vuedraggable 实现过这个功能，我这里自己深度封装了 el-upload ，用这种方式改动很大，而且感觉不够优雅。

 

突然想起之前看的d2-admin项目里面有类似的功能，里面用到了 sortablejs 参考一下。审查元素看看，emmm，可以用。

 

下载依赖 npm install sortablejs

关键代码如下，轻松实现拖拽排序功能，并且很优雅。

<template>
  <!-- 省略其他配置 -->
  <el-upload ref="upload" :file-list.sync="fileList"></el-upload>
</template>
<script>
import Sortable from 'sortablejs';
export default {
  data() {
    return {
      fileList: []
    };
  },
  mounted() {
    this.initDragSort();
  },
  methods: {
    initDragSort() {
      // 支持拖拽排序
      const el = this.$refs.upload.$el.querySelectorAll('.el-upload-list')[0];
      Sortable.create(el, {
        onEnd: ({ oldIndex, newIndex }) => {
          // 交换位置
          const arr = this.fileList;
          const page = arr[oldIndex];
          arr.splice(oldIndex, 1);
          arr.splice(newIndex, 0, page);
        }
      });
    }
  }
};
</script>