UniApp 实现兼容 H5 和小程序的拖拽排序组件

如何使用 UniApp 实现一个兼容 H5 和小程序的 九宫格拖拽排序组件,实现思路和关键步骤。

一、实现目标

  • 支持拖动菜单项改变顺序
  • 拖拽过程实时预览移动位置
  • 拖拽松开后自动吸附回网格
  • 兼容 H5 和小程序平台

二、功能结构拆解以及完整代码

完整代码:

<template><view class="container"><view class="menu-title">菜单列表</view><view class="grid-container"><viewclass="grid-item"v-for="(item, index) in menuList":key="index":class="{ 'active': currentIndex === index }":style="getPositionStyle(index)"@touchstart="handleTouchStart($event, index)"@touchmove.stop.prevent="handleTouchMove($event)"@touchend="handleTouchEnd"><view class="item-content"><view class="item-icon"><uni-icons :type="item.icon || 'star'" size="24"></uni-icons></view><view class="item-name">{{ item.name }}</view></view></view></view></view>
</template><script>
export default {name: 'MenuGrid',data() {return {// 菜单项列表menuList: [{ name: '首页', icon: 'home' },{ name: '消息', icon: 'chat' },{ name: '联系人', icon: 'contact' },{ name: '日历', icon: 'calendar' },{ name: '设置', icon: 'gear' },{ name: '相册', icon: 'image' },{ name: '文件', icon: 'folder' },{ name: '位置', icon: 'location' },{ name: '收藏', icon: 'star-filled' },{ name: '视频', icon: 'videocam' },{ name: '音乐', icon: 'sound' },{ name: '订单', icon: 'paperplane' }],// 网格配置columns: 4,     // 每行显示的列数itemSize: 80,   // 每个项目的大小 (单位px)itemGap: 15,    // 项目之间的间隔// 拖拽状态currentIndex: -1, // 当前拖拽的项目索引startX: 0,       // 触摸开始X坐标startY: 0,       // 触摸开始Y坐标moveOffsetX: 0,  // X轴移动的距离moveOffsetY: 0,  // Y轴移动的距离positions: [],   // 所有项目的位置isDragging: false // 是否正在拖拽}},mounted() {this.initPositions();},methods: {// 初始化所有项目的位置initPositions() {this.positions = [];const { itemSize, itemGap, columns } = this;this.menuList.forEach((_, index) => {const row = Math.floor(index / columns);const col = index % columns;// 计算项目位置this.positions.push({x: col * (itemSize + itemGap),y: row * (itemSize + itemGap),zIndex: 1});});},// 获取项目定位样式getPositionStyle(index) {if (!this.positions[index]) return '';const position = this.positions[index];const { itemSize } = this;return {transform: `translate3d(${position.x}px, ${position.y}px, 0)`,width: `${itemSize}px`,height: `${itemSize}px`,zIndex: position.zIndex || 1};},// 处理触摸开始handleTouchStart(event, index) {if (this.isDragging) return;const touch = event.touches[0];this.currentIndex = index;this.startX = touch.clientX;this.startY = touch.clientY;this.moveOffsetX = 0;this.moveOffsetY = 0;this.isDragging = true;// 提升当前项的层级this.positions[index].zIndex = 10;// 震动反馈uni.vibrateShort();},// 处理触摸移动handleTouchMove(event) {if (this.currentIndex === -1 || !this.isDragging) return;const touch = event.touches[0];// 计算移动距离const deltaX = touch.clientX - this.startX;const deltaY = touch.clientY - this.startY;this.moveOffsetX += deltaX;this.moveOffsetY += deltaY;// 更新拖拽项的位置this.positions[this.currentIndex].x += deltaX;this.positions[this.currentIndex].y += deltaY;// 更新开始位置,用于下一次移动计算this.startX = touch.clientX;this.startY = touch.clientY;// 检查是否需要交换位置this.checkForSwap();},// 处理触摸结束handleTouchEnd() {if (this.currentIndex === -1) return;// 重置拖拽项的层级if (this.positions[this.currentIndex]) {this.positions[this.currentIndex].zIndex = 1;}// 将所有项吸附到网格this.snapAllItemsToGrid();// 重置拖拽状态this.isDragging = false;this.currentIndex = -1;this.moveOffsetX = 0;this.moveOffsetY = 0;// 触发排序完成事件this.$emit('sort-complete', [...this.menuList]);},// 将所有项吸附到网格snapAllItemsToGrid() {const { itemSize, itemGap, columns } = this;this.menuList.forEach((_, index) => {const row = Math.floor(index / columns);const col = index % columns;this.positions[index] = {x: col * (itemSize + itemGap),y: row * (itemSize + itemGap),zIndex: 1};});},// 检查是否需要交换位置checkForSwap() {if (this.currentIndex === -1) return;const currentPos = this.positions[this.currentIndex];const { itemSize, itemGap } = this;let closestIndex = -1;let minDistance = Number.MAX_VALUE;// 找出与当前拖拽项距离最近的项this.positions.forEach((pos, index) => {if (index !== this.currentIndex) {// 计算中心点之间的距离const centerX1 = currentPos.x + itemSize / 2;const centerY1 = currentPos.y + itemSize / 2;const centerX2 = pos.x + itemSize / 2;const centerY2 = pos.y + itemSize / 2;const distance = Math.sqrt(Math.pow(centerX1 - centerX2, 2) +Math.pow(centerY1 - centerY2, 2));// 只考虑距离小于阈值的项const threshold = (itemSize + itemGap) * 0.6;if (distance < threshold && distance < minDistance) {minDistance = distance;closestIndex = index;}}});// 如果找到了足够近的项,交换位置if (closestIndex !== -1) {this.swapItems(this.currentIndex, closestIndex);}},// 交换两个项目swapItems(fromIndex, toIndex) {// 交换菜单列表中的项const temp = { ...this.menuList[fromIndex] };this.$set(this.menuList, fromIndex, { ...this.menuList[toIndex] });this.$set(this.menuList, toIndex, temp);// 交换位置信息[this.positions[fromIndex], this.positions[toIndex]] =[this.positions[toIndex], this.positions[fromIndex]];// 更新当前拖拽的索引this.currentIndex = toIndex;}}
}
</script><style scoped>
.container {padding: 20rpx;background-color: #f7f7f7;
}.menu-title {font-size: 32rpx;font-weight: bold;margin-bottom: 30rpx;text-align: center;
}.grid-container {position: relative;width: 100%;min-height: 500rpx;overflow: hidden;
}.grid-item {position: absolute;left: 0;top: 0;transition: transform 0.3s ease;will-change: transform;
}.grid-item.active {transition: none;transform: scale(1.05);z-index: 10;
}.item-content {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: #ffffff;border-radius: 12rpx;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}.item-icon {display: flex;justify-content: center;align-items: center;margin-bottom: 10rpx;
}.item-name {font-size: 24rpx;color: #333;text-align: center;
}
</style>

整个功能可以拆分为以下几个部分:

  1. 网格布局计算:确定每个 item 的初始位置
  2. 拖拽事件绑定:监听 touchstart / touchmove / touchend
  3. 实时移动渲染:跟随手指移动改变 transform 样式
  4. 最近距离判断:判断最近的可交换项并交换
  5. 松开后归位:释放手指后吸附至新的位置

三、组件结构设计

1. 模板部分

使用 v-for 渲染菜单项,并绑定触摸事件。

<view class="grid-item"v-for="(item, index) in menuList":key="index":class="{ 'active': currentIndex === index }":style="getPositionStyle(index)"@touchstart="handleTouchStart($event, index)"@touchmove.stop.prevent="handleTouchMove($event)"@touchend="handleTouchEnd"><!-- 图标和文字 -->
</view>
2. 数据结构
  • menuList: 菜单数据
  • positions: 所有 item 的坐标信息
  • currentIndex: 当前拖拽的索引
  • startX/Y: 拖拽起始点坐标
  • moveOffsetX/Y: 移动的累计距离
  • isDragging: 是否正在拖拽中
3. 初始化位置

通过 itemSize + itemGap + columns 计算每一项的坐标。

const row = Math.floor(index / columns);
const col = index % columns;
positions.push({x: col * (itemSize + itemGap),y: row * (itemSize + itemGap),zIndex: 1
});
4. 拖拽处理流程
- 触摸开始
  • 记录初始触摸位置
  • 提升 z-index
  • 设置当前拖拽 index
- 拖动中
  • 计算当前位置偏移量
  • 实时更新拖拽项的 transform 位置
  • 检查距离最近的其他项是否可交换
- 拖动结束
  • 重置拖拽状态
  • 吸附所有项回网格对齐
  • 发出排序完成事件
5. 交换逻辑

通过拖拽项与其它项之间的中心点距离,找到最近项,判断是否在交换阈值范围内(比如 0.6 倍 itemSize + gap),再触发 swapItems

const distance = Math.sqrt((dx)^2 + (dy)^2);
if (distance < threshold) swapItems(fromIndex, toIndex);

四、平台兼容性说明

  • 小程序端: 使用 touchstart, touchmove, touchend 原生事件即可
  • H5端: 同样支持原生事件,需使用 stop.prevent 修饰符阻止页面滚动
  • 注意事项: 不建议使用 @mousedown 等 PC 事件,移动端表现不一致

五、性能优化建议

  • 使用 transform: translate3d 提升动画性能
  • 拖拽时关闭 transition,松开后再开启
  • 将 drag 状态变化为响应式变量,避免频繁操作 DOM

六、完整效果图示例

H5端
在这里插入图片描述

小程序端
在这里插入图片描述

七、总结

本组件通过计算每个 item 的位置并绑定触摸事件,实现了拖拽排序的能力,支持吸附、交换和动态位置调整,兼容多个平台。适用于菜单管理、组件排序等场景,封装后复用性强。

如果你有更多关于 UniApp 拖拽交互的场景需求,欢迎留言讨论!

**

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/77502.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[raspberrypi 0w and respeaker 2mic]实时音频波形

0. 环境 ubuntu22主机&#xff0c; 192.168.8.162&#xff0c; raspberry 0w&#xff0c; 192.168.8.220 路由器 1. 树莓派 # rpi - send.py # 或者命令行&#xff1a;arecord -D plughw:1,0 -t wav -f cd -r 16000 -c 2 | nc 192.168.8.162 12345import socket imp…

公司内部建立apt源

有一篇建立pypi源的在这里需要的可以查看&#xff1a;公司内部建立pypi源-CSDN博客 背景&#xff0c;公司内部有很多工具仅供内部使用&#xff0c;如果用apt的方式就比较方便&#xff0c;只需要修改sources.list将源添加进去就可以了。我们接下来的操作就是为了实现这个需求。…

UE5中如何修复后处理动画蓝图带来的自然状态下的metablriger身体绑定形变(如耸肩)问题

【[metablriger] UE5中如何修复后处理动画蓝图带来的自然状态下的metablriger身体绑定形变(如耸肩)问题】 UE5中如何修复后处理动画蓝图带来的自然状态下的metablriger身体绑定形变(如耸肩)问题

AWS Bedrock生成视频详解:AI视频创作新时代已来临

💡 TL;DR: AWS Bedrock现已支持AI视频生成功能,让企业无需深厚AI专业知识即可创建高质量视频内容。本文详解Bedrock视频生成能力的工作原理、应用场景和实操指南,助你快速掌握这一革命性技术。 🎬 AWS Bedrock视频生成:改变内容创作的游戏规则 还记得几年前,制作一个专…

1.2 测试设计阶段:打造高质量的测试用例

测试设计阶段&#xff1a;打造高质量的测试用例 摘要 本文详细介绍了软件测试流程中的测试设计阶段&#xff0c;包括测试用例设计、测试数据准备、测试环境搭建和测试方案设计等内容。通过本文&#xff0c;读者可以系统性地了解测试设计的方法和技巧&#xff0c;掌握如何高效…

jQueryHTML与插件

1.jQuery 事件机制 1.1 注册事件 bind()、on()方法向被选元素添加一个或多个事件处理程序&#xff0c;以及当事件发生时运行的函数 $("p").on({"click": function () {alert("点击了")},"mouseenter": function () {…

MySQL 触发器与存储过程:数据库的自动化工厂

在数据世界的工业区&#xff0c;有一座运转高效的自动化工厂&#xff0c;那里的机器人日夜不停地处理数据…这就是 MySQL 的触发器与存储过程系统&#xff0c;它让数据库从"手工作坊"变成了"现代化工厂"… 什么是 MySQL 触发器与存储过程&#xff1f;&…

PostgreSQL-中文字段排序-修改字段的排序规则

最新版本更新 https://code.jiangjiesheng.cn/article/365?fromcsdn 推荐 《高并发 & 微服务 & 性能调优实战案例100讲 源码下载》 -- 修改字段的排序规则 ALTER TABLE "public"."your_table_name" ALTER COLUMN "name" TYPE varcha…

GitHub优秀项目:数据湖的管理系统LakeFS

lakeFS 是一个开源工具&#xff0c;它将用户的对象存储转换为类似Git的存储库。使用户可以像管理代码一样管理数据湖。借助 lakeFS&#xff0c;可以构建可重复、原子化和版本化的数据湖操作--从复杂的ETL作业到数据科学和分析。 Stars 数11090Forks 数3157 主要特点 强大的数据…

页面编辑器CodeMirror初始化不显示行号或文本内容

延迟刷新 本来想延迟100毫秒的&#xff0c;但是会出现样式向左偏移的情况&#xff0c;于是试了试500毫秒&#xff0c;发现就没有问题了&#xff0c;可能是样式什么是需要一个加载过程吧。 useEffect(() > {editorRef.current?.setValue(value || );setTimeout(() > {edi…

使用 Spring Boot 和 Uniapp 搭建 NFC 读取系统

目录 一、NFC 技术原理大揭秘1.1 NFC 简介1.2 NFC 工作原理1.3 NFC 应用场景 二、Spring Boot 开发环境搭建2.1 创建 Spring Boot 项目2.2 项目基本配置 三、Spring Boot 读取 NFC 数据3.1 NFC 设备连接与初始化3.2 数据读取逻辑实现3.3 数据处理与存储 四、Uniapp 前端界面开发…

台式电脑插入耳机没有声音或麦克风不管用

目录 一、如何确定插孔对应功能1.常见音频插孔颜色及功能2.如何确认电脑插孔?3.常见问题二、 解决方案1. 检查耳机连接和设备选择2. 检查音量设置和静音状态3. 更新或重新安装声卡驱动4. 检查默认音频格式5. 禁用音频增强功能6. 排查硬件问题7. 检查系统服务8. BIOS设置(可选…

Gerrit的安装与使用说明(Ubuntu)

#本页面按192.168.60.148服务器举例进行安装配置 1.权限配置 ## 使用root或者有sudo权限用户执行 # 创建gerrit用户 sudo useradd gerrit # 设置gerrit用户的密码 sudo passwd gerrit # 增加sudo权限 sudo visudo 在root ALL(ALL:ALL) ALL行下添加如下内容 gerrit ALL(ALL:…

Visual Studio 2019 配置VTK9.3.1

文章目录 参考博客1、 VTK下载和编译2、vs2019配置vtk9.3.1参考博客 Visual Studio 2022 配置VTK9.3.0 1、 VTK下载和编译 见博客 CMake编译VTK 2、vs2019配置vtk9.3.1 新建一个项目 写入以下代码 #include <vtkActor.h> #include <vtkAssembly.h> #include…

C++进阶——C++11_右值引用和移动语义_可变参数模板_类的新功能

目录 1、右值引用和移动语义 1.1 左值和右值 1.2 左值引用和右值引用 1.3 引用延长生命周期 1.4 左值和右值的参数匹配 1.5 右值引用和移动语义的使用场景 1.5.1 左值引用主要使用场景 1.5.2 移动构造和移动赋值 1.5.3 右值引用和移动语义解决传值返回问题 1.5.4 右值…

HTTP协议原理深度解析:从基础到实践

引言 在互联网技术体系中,HTTP(HyperText Transfer Protocol)协议如同数字世界的"通用语言",支撑着全球超50亿网民的日常网络交互。作为爬虫开发、Web应用构建的核心技术基础,理解HTTP原理是每个开发者必须掌握的技能。本文将从协议本质、技术演进、安全机制三…

Web品质 - 重要的HTML元素

Web品质 - 重要的HTML元素 在构建一个优秀的Web页面时,HTML元素的选择和运用至关重要。这些元素不仅影响页面的结构,还直接关系到页面的可用性、可访问性和SEO表现。本文将深入探讨一些关键的HTML元素,并解释它们在提升Web品质方面的重要性。 1. <html> 根元素 HTM…

【AI提示词】竞品分析专家

提示说明 对产品进行竞品分析&#xff0c;明确产品定位和优化营销策略。 提示词 # 角色:竞品分析专家## 背景: 需要对旗下产品A进行竞品分析,明确产品定位和优化营销策略。## 描述: - 作者:张三 - 版本:1.0 - 语言:中文## 注意事项: 保持客观公正态度,用数据说话,给出具体的…

4-6记录(B树)

找左边右下或者右边左下 转化成了前驱后继的删除 又分好几种情况&#xff1a; 1. 只剩25&#xff0c;小于2&#xff0c;所以把父亲拉到25旁边&#xff0c;兄弟的70顶替父亲 对于25&#xff0c;25的后继就是70&#xff0c;25后继的后继是71&#xff08;中序遍历) 2. 借左子树…

什么是RACI矩阵,应用在什么场景?

一、什么是RACI RACI矩阵是一种用于明确项目或任务中角色与责任的管理工具&#xff0c;通过定义不同人员在任务中的参与程度来避免职责不清的问题。以下是其核心要点&#xff1a; ‌RACI的含义‌ ● ‌R&#xff08;Responsible&#xff09;执行者‌&#xff1a;直接完成任务…