uni-app图片列表拖拽排序需手动实现touchstart记录索引touchmove中用throttle节流createSelectorQuery动态查可视区DOM位置比对触摸Y坐标与各元素中线触发单次交换更新数组后用key强制刷新。uni-app 里图片列表怎么支持拖拽排序直接用 touchstart/touchmove/touchend 手动算位置交换别碰 draggable 属性——H5 可能生效但小程序平台微信、支付宝根本不认这个 HTML 属性会直接忽略。核心思路是监听手指按下的元素索引实时计算移动过程中与其它项的中心位置关系触发交换。不是靠 CSS 动画位移而是靠数组顺序重排 key 强制刷新 DOM。必须给每张图的容器加 catchtouchstart小程序里防止事件冒泡中断手势记录初始 touches[0].clientY在 touchmove 中持续比对相邻项的中线rect.top rect.height / 2只在跨过中线时交换一次避免高频重复触发用 lastSwappedIndex 缓存上一次交换目标交换后立即调用 this.$forceUpdate() 或改用 key如 :keyitem.id orderIndex确保视图更新touchmove 里怎么判断该和哪张图交换位置不能靠绝对坐标差值硬比得结合当前列表渲染后的实际 DOM 位置。每次 touchmove 都要重新 uni.createSelectorQuery() 查询所有图片容器的 boundingClientRect否则滚动后位置偏移会导致误判。查询必须用 exec() 回调不能写在 touchstart 里“缓存一次了事”——列表可能因数据变化或滚动重排遍历所有 rect找出当前触摸 Y 坐标落在哪个项的「中线区间」比如 touchY rect.top touchY 表示已进入上半区但还没跨到下一项真正触发交换的条件是从 A 项区域移动到 B 项区域并且 B 项不是原位置相邻项防抖且 Math.abs(currentIndex - targetIndex) 1为什么 onDragStart 里不能直接 this.draggingIndex index因为 touchstart 触发时event.touches 还没生成event.target 在某些安卓 WebView 下可能指向父容器而非图片本身导致取不到正确 index。 Ideogram Ideogram是一个全新的文本转图像AI绘画生成平台擅长于生成带有文本的图像如LOGO上的字母、数字等。
