element-ui的el-upload组件实现上传拖拽排序图片顺序(sortablejs)

html 复制代码
<template>
   <!-- 省略其他配置 -->
   <el-upload ref="upload" :file-list.sync="fileList"></el-upload>
 </template>
javascript 复制代码
 <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>
相关推荐
想不到一个好的ID10 分钟前
Claude Code 初学者必看指南
前端·后端
用户3365663421712 分钟前
Vue3+Vite项目极致性能优化:从构建到运行全链路实战指南
vue.js
一枚菜鸟_12 分钟前
04-Flutter状态管理终极指南-Riverpod3.x从入门到精通
前端
一枚菜鸟_16 分钟前
06-Flutter动画从零到炫酷-让你的App动起来
前端
Wect18 分钟前
React Hooks 核心原理
前端·算法·typescript
shughui22 分钟前
Fiddler下载、安装、使用、汉化,详细图文教程(2026附安装包)
前端·测试工具·fiddler
用户158159637437023 分钟前
多 Agent 系统容错与恢复机制:OAuth 过期、Cron 级联失败的工程解法
javascript
阿帕琪尔25 分钟前
😎vite插件: 自动打包压缩图片和转webp(二)
前端·vite
思慕很大很大31 分钟前
浏览器基础知识-进程与线程
前端·浏览器
猩猩程序员36 分钟前
dial9:一个强悍的 Tokio 调试工具!!!
前端