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>
相关推荐
Flynt26 分钟前
开源"间谍卫星"说数据全是真的,我把它的免key数据源挨个试了一遍
前端·开源·数据可视化
Csvn1 小时前
渲染管线
前端
程序员大阳1 小时前
副队长CSS教程(33)–圆角与透明
前端·css·透明·圆角
志尊宝1 小时前
Vue3 零基础每日笔记(082):文件上传实战——el-upload 校验、自定义上传、头像预览
前端·javascript·vue.js·笔记·#javascript·#vue.js
鬼手点金2 小时前
opencode-rules 插件
java·开发语言·前端·人工智能·chrome·git·github
柳杉2 小时前
借助 Codex 和可视化工作流,从调研到完整实现,3D 大屏竟然可以这么简单
前端·ai编程·数据可视化
IMPYLH2 小时前
HTML 的 <wbr> 元素
前端·html
Dovis(誓平步青云)3 小时前
常用命令藏得太深?怎么做一个快捷命令坞
运维·前端·自动化·音视频·prometheus
IT_陈寒3 小时前
Vite的这个问题坑了我三天,原来如此解决!
前端·人工智能·后端
网易云信3 小时前
大模型能上岗做销售吗?我们让 12 款国产模型交了 420 份作业
前端·后端