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>