uniapp自定义拖拽排列

uniapp自定义拖拽排列并改变下标

<!-- 页面模板 -->
<template><view class="container"><view v-for="(item, index) in list" :key="item.id" class="drag-item" :style="{transform: `translate(${activeIndex === index ? offsetX : 0}px, ${activeIndex === index ? offsetY : 0}px)`,transition: activeIndex === index ? 'none' : 'transform 0.3s',zIndex: activeIndex === index ? 999 : 1,boxShadow: activeIndex === index ? '0 8px 20px rgba(0,0,0,0.2)' : '0 2px 6px rgba(0,0,0,0.1)'}" @touchstart="handleTouchStart(index, $event)" @touchmove="handleTouchMove(index, $event)"@touchend="handleTouchEnd">{{ item.content }}</view></view>
</template><script>export default {data() {return {list: [{ id: 1, content: 'Item 1' },{ id: 2, content: 'Item 2' },{ id: 3, content: 'Item 3' },{ id: 4, content: 'Item 4' },{ id: 5, content: 'Item 5' },{ id: 6, content: 'Item 6' },{ id: 7, content: 'Item 7' },{ id: 8, content: 'Item 8' },{ id: 9, content: 'Item 9' },{ id: 10, content: 'Item 10' },{ id: 11, content: 'Item 11' },{ id: 12, content: 'Item 12' },{ id: 13, content: 'Item 13' },{ id: 14, content: 'Item 14' },], activeIndex: -1, // 当前激活元素索引startX: 0, // 触摸起始X坐标startY: 0, // 触摸起始Y坐标offsetX: 0, // X轴偏移量offsetY: 0, // Y轴偏移量positions: [] // 元素位置缓存数组:ml-citation{ref="1,3" data="citationList"}}},mounted() {// this.initPositions()},methods: {// 初始化元素位置信息:ml-citation{ref="3,5" data="citationList"}initPositions() {uni.createSelectorQuery().in(this).selectAll('.drag-item').boundingClientRect(rects => {this.positions = rects.map(rect => ({left: rect.left,top: rect.top,width: rect.width,height: rect.height}))}).exec()},// 触摸开始事件:ml-citation{ref="2,7" data="citationList"}handleTouchStart(index, e) {this.activeIndex = indexthis.startX = e.touches[0].clientXthis.startY = e.touches[0].clientYthis.initPositions()},// 触摸移动事件:ml-citation{ref="4,8" data="citationList"}handleTouchMove(index, e) {if (index !== this.activeIndex) returnconst currentX = e.touches[0].clientXconst currentY = e.touches[0].clientYthis.offsetX = currentX - this.startXthis.offsetY = currentY - this.startY// 查找目标位置:ml-citation{ref="1,6" data="citationList"}const targetIndex = this.findTargetIndex(currentX, currentY)if (targetIndex !== -1 && targetIndex !== this.activeIndex) {this.swapElements(this.activeIndex, targetIndex)this.activeIndex = targetIndexthis.startX = currentXthis.startY = currentYthis.offsetX = 0this.offsetY = 0}},// 查找目标插入位置:ml-citation{ref="5,6" data="citationList"}findTargetIndex(x, y) {for (let i = 0; i < this.positions.length; i++) {const pos = this.positions[i]if (x > pos.left && x < pos.left + pos.width &&y > pos.top && y < pos.top + pos.height) {return i}}return -1},// 交换数组元素:ml-citation{ref="2,7" data="citationList"}swapElements(oldIndex, newIndex) {const temp = [...this.list]const movedItem = temp.splice(oldIndex, 1)[0]temp.splice(newIndex, 0, movedItem)this.list = tempthis.$nextTick(() => this.initPositions())},// 触摸结束事件:ml-citation{ref="4,8" data="citationList"}handleTouchEnd() {this.activeIndex = -1this.offsetX = 0this.offsetY = 0}}}
</script><style>.container {padding: 10px;overflow: hidden;/* 处理浮动元素换行 */}.drag-item {float: left;width: 160px;height: 80px;margin: 8px;background: #fff;border-radius: 12px;display: flex;align-items: center;justify-content: center;transition: all 0.3s;user-select: none;}
</style>