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

最新推荐文章于 2024-12-25 17:00:43 发布

原创

最新推荐文章于 2024-12-25 17:00:43 发布 · 1.9k 阅读

标签

#vue.js #前端 #javascript

收录于

之前是使用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.querySe