uniapp实现列表拖拽排序效果-北京尧图网络

一、前言本文总结如何实现一个流畅的列表拖拽排序效果类似各大音乐APP的歌单排序功能。二、实现思路核心思路拖拽时只做视觉位移松手后才真正改变数据顺序三、需要改动的地方1. 数据状态准备在data中添加拖拽状态管理data() { return { // 你的列表数据 list: [], // 拖拽状态 dragState: { isDragging: false, // 是否正在拖拽 startY: 0, // 起始Y坐标 startIndex: -1, // 拖拽起始索引 hoverIndex: -1, // 当前悬停索引 movedY: 0 // 移动的距离 }, itemHeight: 80 // 每项的高度(px) } }2. 模板修改给列表项添加动态 class标记拖拽中的项动态 style控制位移触摸事件template div classlist-container div v-for(item, index) in list :keyitem.id classlist-item :class{ dragging: dragState.startIndex index dragState.isDragging } :stylegetItemStyle(index) touchstart.stoponTouchStart($event, index) touchmove.stop.preventonTouchMove($event, index) touchend.stoponTouchEnd($event, index) !-- 列表项内容 -- div classitem-content{{ item.name }}/div /div /div /template3. 样式修改添加过渡动画和拖拽状态样式.list-container { position: relative; } .list-item { /* 基础样式 */ padding: 16px; margin-bottom: 12px; background: #f5f5f5; border-radius: 8px; /* 关键过渡动画 */ transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease; position: relative; will-change: transform; } .list-item.dragging { /* 拖拽中的样式 */ background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); z-index: 100; /* 拖拽项在最上层 */ }4. 添加核心方法方法一计算每个项的样式getItemStyle(index) { if (!this.dragState.isDragging) { return ; } const { startIndex, hoverIndex, movedY } this.dragState; const itemHeight this.itemHeight; // 拖拽中的项跟随手指移动 if (index startIndex) { return transform: translateY(${movedY}px) scale(1.02); z-index: 100; transition: none;; } // 其他项让开位置 if (startIndex hoverIndex) { // 向下拖拽 if (index startIndex index hoverIndex) { return transform: translateY(-${itemHeight}px);; } } else if (startIndex hoverIndex) { // 向上拖拽 if (index hoverIndex index startIndex) { return transform: translateY(${itemHeight}px);; } } return ; }方法二拖拽开始onTouchStart(e, index) { this.dragState.isDragging true; this.dragState.startIndex index; this.dragState.hoverIndex index; this.dragState.startY e.touches[0].clientY; this.dragState.movedY 0; }方法三拖拽移动onTouchMove(e, index) { if (!this.dragState.isDragging) return; const currentY e.touches[0].clientY; const deltaY currentY - this.dragState.startY; this.dragState.movedY deltaY; // 计算当前悬停位置 const offsetIndex Math.round(deltaY / this.itemHeight); let newHoverIndex this.dragState.startIndex offsetIndex; // 边界处理 newHoverIndex Math.max(0, Math.min(newHoverIndex, this.list.length - 1)); if (newHoverIndex ! this.dragState.hoverIndex) { this.dragState.hoverIndex newHoverIndex; } }方法四拖拽结束onTouchEnd(e, index) { const { startIndex, hoverIndex } this.dragState; // 先重置拖拽状态触发归位动画 this.dragState.isDragging false; this.dragState.movedY 0; // 真正改变数据顺序 if (startIndex ! hoverIndex hoverIndex 0) { const item this.list.splice(startIndex, 1)[0]; this.list.splice(hoverIndex, 0, item); } // 清理状态 this.dragState.startIndex -1; this.dragState.hoverIndex -1; }四、完整示例template div classpage h3我的歌单/h3 div classlist-container div v-for(song, index) in songList :keysong.id classsong-item :class{ dragging: dragState.startIndex index dragState.isDragging } :stylegetItemStyle(index) touchstart.stoponTouchStart($event, index) touchmove.stop.preventonTouchMove($event, index) touchend.stoponTouchEnd($event, index) div classsong-cover{{ song.emoji }}/div div classsong-info div classsong-name{{ song.name }}/div div classsong-artist{{ song.artist }}/div /div /div /div /div /template script export default { data() { return { songList: [ { id: 1, name: 晴天, artist: 周杰伦, emoji: }, { id: 2, name: 稻香, artist: 周杰伦, emoji: }, { id: 3, name: 七里香, artist: 周杰伦, emoji: }, { id: 4, name: 夜曲, artist: 周杰伦, emoji: }, { id: 5, name: 青花瓷, artist: 周杰伦, emoji: } ], dragState: { isDragging: false, startY: 0, startIndex: -1, hoverIndex: -1, movedY: 0 }, itemHeight: 76 } }, methods: { getItemStyle(index) { if (!this.dragState.isDragging) return ; const { startIndex, hoverIndex, movedY } this.dragState; if (index startIndex) { return transform: translateY(${movedY}px) scale(1.02); z-index: 100; transition: none;; } if (startIndex hoverIndex) { if (index startIndex index hoverIndex) { return transform: translateY(-${this.itemHeight}px);; } } else if (startIndex hoverIndex) { if (index hoverIndex index startIndex) { return transform: translateY(${this.itemHeight}px);; } } return ; }, onTouchStart(e, index) { this.dragState.isDragging true; this.dragState.startIndex index; this.dragState.hoverIndex index; this.dragState.startY e.touches[0].clientY; this.dragState.movedY 0; }, onTouchMove(e, index) { if (!this.dragState.isDragging) return; const deltaY e.touches[0].clientY - this.dragState.startY; this.dragState.movedY deltaY; const offsetIndex Math.round(deltaY / this.itemHeight); let newHoverIndex this.dragState.startIndex offsetIndex; newHoverIndex Math.max(0, Math.min(newHoverIndex, this.songList.length - 1)); if (newHoverIndex ! this.dragState.hoverIndex) { this.dragState.hoverIndex newHoverIndex; } }, onTouchEnd(e, index) { const { startIndex, hoverIndex } this.dragState; this.dragState.isDragging false; this.dragState.movedY 0; if (startIndex ! hoverIndex hoverIndex 0) { const item this.songList.splice(startIndex, 1)[0]; this.songList.splice(hoverIndex, 0, item); } this.dragState.startIndex -1; this.dragState.hoverIndex -1; } } } /script style scoped .page { padding: 20px; } .list-container { position: relative; margin-top: 20px; } .song-item { display: flex; align-items: center; padding: 16px; margin-bottom: 12px; background: #f5f5f5; border-radius: 10px; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease; position: relative; will-change: transform; } .song-item.dragging { background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); z-index: 100; } .song-cover { font-size: 32px; margin-right: 12px; } .song-name { font-size: 16px; font-weight: 500; } .song-artist { font-size: 13px; color: #999; margin-top: 4px; } /style

uniapp实现列表拖拽排序效果

相关推荐

原神脚本终极指南：如何快速实现自动钓鱼和智能拾取功能

Meshroom完全指南：免费开源3D重建软件从入门到精通

Umi-OCR终极指南：3分钟掌握开源免费离线OCR的完整高效解决方案

更多资讯

网盘直链解析：3 步拿到网盘文件，快速上手指南

DeepChat Chat Scroll Ownership 重构实战：从 3000 行 ChatPage 到单滚动所有者状态机

Rerun Position2D 组件深度解析：2D 空间坐标的编码、序列化与多语言使用

fluent-bit 内置 nghttp2 的 HPACK 头字段压缩：nghttp2_hd_deflate_hd 函数深入解析

Kubernetes Goat 私有容器镜像仓库攻击实战：利用 Registry HTTP API v2 拉取镜像元数据与敏感凭证

一次现网问题定位-接口偶发报500,PrematureCloseException: Connection prematurely closed DURING response

今日更新

AWS无服务器应用开发指南：从Lambda到SAM的架构与实践

SpringBoot+Vue人事系统实战：解决HR数据断点与事务一致性

MATLAB手写紧束缚模型计算石墨烯能带结构

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？