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