更新记录

1.0.1（2025-04-28） 下载此版本

列表拖拽

平台兼容性

uni-app

其他

📦 DragList 拖拽排序组件

📱 扫码体验

基于 UniApp + Vue3 开发的通用拖拽排序组件。
支持拖拽排序、删除确认、图片预览、拖拽时禁止点击，全面适配移动端、小程序、H5。

✨ 特性

• 拖拽排序，手柄控制，防止误触
• 删除带确认弹窗
• 点击图片预览
• 拖拽时自动禁用点击操作
• 高度自适应，超过部分可滚动
• 图片、文字不会溢出容器
• EasyCom 自动注册，无需 import，直接使用

🚀 快速开始

1. 复制组件文件

把 drag-list.vue 复制到你的项目 components/ 目录下，例如：

2. 页面中直接使用

因为启用了 EasyCom，无需 import，直接使用：

<template>
  <view>
    <drag-list v-model="fileList"></drag-list>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const fileList = ref(Array.from({ length: 20 }, (_, index) => ({
  id: index + 1,
  name: `项目 ${index + 1}`,
  thumb: '/static/logo.png'
})))
</script>