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>
相关推荐
kakacc:1 分钟前
SpringBoot+Hutool+Vue实现导出
java·vue.js·spring boot
勤劳打代码34 分钟前
妙笔生花 —— Flutter 实现飞入动画
前端·flutter·设计模式
银安41 分钟前
CSS排版布局篇(4):浮动(float)、定位(position) 、层叠(Stacking)
前端·css
昭昭日月明43 分钟前
mac 效率工具:Raycast 的扩展开发
前端·mac·设计
white-persist1 小时前
XXE 注入漏洞全解析:从原理到实战
开发语言·前端·网络·安全·web安全·网络安全·信息可视化
练习时长一年1 小时前
Spring内置功能
java·前端·spring
SHUIPING_YANG1 小时前
完美迁移:将 nvm 和 npm 完全安装到 Windows D 盘
前端·windows·npm
lypzcgf2 小时前
Coze源码分析-资源库-编辑数据库-前端源码-核心组件
前端·数据库·源码分析·coze·coze源码分析·ai应用平台·agent平台
勤奋菲菲2 小时前
Koa.js 完全指南:下一代 Node.js Web 框架
前端·javascript·node.js