自定义拖动排序

使用插件：SortableJS

npm install sortablejs --save

结合element的上传组件的效果示例：

代码实现：

<template>
	<div>
        //element上传组件
		<el-upload
			ref="imageUpload"
			v-model:file-list="formData.images"
			:action="uploadUrl"
			list-type="picture-card"
			:on-preview="handlePictureCardPreview"
			:on-remove="handleRemove"
			:on-success="handleSuccess"
			:on-error="uploadErrorFn"
			accept=".jpg,.png"
			:before-upload="beforeUpload"
			multiple
		>
			<el-icon><Plus /></el-icon>
		</el-upload>
		<div class="uploadBox">支持.jpg/.png格式，上传图片大小不能超过10MB，推荐长宽比=1:1</div>
		<el-dialog v-model="VisiblePreview" width="auto">
			<img w-full :src="dialogImageUrl" alt="Preview Image" />
		</el-dialog>
	</div>
</template>

<script setup lang="ts">

//导入sortablejs
import Sortable from 'sortablejs';

//获取组件实例
const imageUpload = ref();

// 获取组件的上传列表的元素
const el = imageUpload.value.$el.querySelectorAll('.el-upload-list')[0];

// 拖动排序  具体参数可查看官网文档
new Sortable(el, {
	sort: true,
	animation: 150,
	ghostClass: 'el-upload-list',
	preventOnFilter: true, //  在触发过滤器`filter`的时候调用`event.preventDefault()`
	handle: '.el-upload-list__item',
	draggable: '.el-upload-list__item',
	dataIdAttr: 'data-id',
	// 拖拽完成后更新数据的位置
	onEnd: async function ({ oldIndex, newIndex }: any) {
		const arr = formData.value.images;
		const page = arr[oldIndex];
		arr.splice(oldIndex, 1);
		arr.splice(newIndex, 0, page);
	},
});
</script>