el-upload组件实现上传拖拽排序图片顺序

之前是使用vuedraggable完成了一次上传拖拽的使用

但是在完成过程中css样式修改上传图标和拖拽区域不能很好的组合在一起

刷到了vuedraggable组件的js方法  sortablejs

Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

相关文档推荐：
官方文档 https://github.com/SortableJS/Sortable
中文文档 https://www.itxst.com/sortablejs

需要进行npm安装 

$ npm install sortablejs --save

<template>
   <el-upload ref="ImageChang" :file-list.sync="photoList"></el-upload>
 </template>

 <script>
 import Sortable from 'sortablejs';
 export default {
   data() {
     return {
       photoList:[]
     };
   },
   mounted() {
     this.initDragSort();
   },
   methods: {
    // 支持拖拽排序
     initDragSort() {
       const el = this.$refs.ImageChang.$el.querySelectorAll('.el-upload-list')[0];
       Sortable.create(el, {
         onEnd: ({ oldIndex, newIndex }) => {
           // 交换位置
           const arr = this.photoList;
           const page = arr[oldIndex];
           arr.splice(oldIndex, 1);
           arr.splice(newIndex, 0, page);
         }
       });
     }
   }
 };
 </script>