更新记录

v1.0.1（2025-06-10） 下载此版本

修复拖拽过程中卡住问题

v1.0.0（2025-02-18） 下载此版本

v1.0.0

平台兼容性

uni-app(4.01)

其他

DraggableList 拖拽排序组件

🚀推荐

另外给大家推荐一个基于vue3、elment plus开发的低代码组态数据大屏设计器

1. 通过拖拽生成前端数据大屏。
2. 支持2.5D 工业组态软件的设计。
3. 支持无缝对接物联网Iot平台。
4. 支持多源数据

API 文档：http://api.meta2dthingsboard.cn/

gitee地址：https://gitee.com/zy849082187/scene-v

一个基于 uni-app 的轻量级拖拽排序列表组件

支持流畅的拖拽动画和自动排序功能。

功能特点

• 🚀 流畅的拖拽动画效果
• 📱 完美支持移动端触摸操作
• 🎯 精确的位置计算和自动排序
• 💫 平滑的过渡动画
• 🔒 智能的边界处理
• 🎨 可自定义样式
• 📦 零依赖，轻量化实现

安装使用

1. 复制 DraggableList 组件到你的项目中。
2. 在页面中引入并使用：

<template>
  <DraggableList :list="menuList" @update="onListUpdate" />
</template>

<script>
import DraggableList from "../components/DraggableList/DraggableList.vue";

export default {
  components: {
    DraggableList,
  },
  data() {
    return {
      menuList: [
        { id: 1, text: "微信", icon: "../../static/微信.svg" },
        { id: 2, text: "支付宝", icon: "../../static/支付宝支付.svg" },
        { id: 3, text: "建设银行", icon: "../../static/建设银行.svg" },
        { id: 4, text: "工商银行", icon: "../../static/工商银行.svg" },
        { id: 5, text: "农业银行", icon: "../../static/中国农业银行.svg" },
      ],
    };
  },
  methods: {
    onListUpdate(newList) {
      this.menuList = newList;
    },
  },
};
</script>

API 文档

Props

列表项数据格式

interface ListItem {
  id: number | string; // 唯一标识
  text: string; // 显示文本
  icon?: string; // 图标路径（可选）
}

实现原理

触摸处理

• 监听 touchstart、touchmove 和 touchend 事件。
• 计算触摸点相对位置和移动距离。

位置计算

• 使用 transform 进行位置变换。
• 实时计算目标位置和索引。

动画效果

• 使用 CSS transition 实现平滑过渡。
• 拖拽时禁用动画以保证响应度。

自动排序

• 基于当前位置计算目标索引。
• 使用数组操作实现列表重排。

注意事项

• 确保列表项都有唯一的 id。
• 建议列表项不要过多（建议不超过 50 个）。
• icon 路径需要是有效的图片资源。
• 适配不同屏幕尺寸时注意单位使用 rpx。

兼容性

• 支持所有 uni-app 支持的平台。