HarmonyOS 鸿蒙Next 拖拽List组件内的子组件时，如何解决被拖拽的子组件位置会向两边偏移的问题

HarmonyOS 鸿蒙Next 拖拽List组件内的子组件时，如何解决被拖拽的子组件位置会向两边偏移的问题

【问题现象】

当在List组件内拖拽交换子组件位置时，拖拽开始时，被拖拽的子组件位置会偏到左侧或右侧，如下图所示：

【背景知识】

• 拖拽是移动端常见的操作动作，常用于编辑列表、网格中的元素顺序。ArkTS组件List，Grid等组件提供了简单的实现拖拽效果的API：onItemDragStart；
• 可通过组合手势GestureGroup和显示动画animateTo，实现自定义拖拽效果。

【定位思路】

绑定onDragStart事件实现ListItem拖拽，仅能实现子组件最终位置变换，并不能很好地实现拖拽过程中平滑过渡的动画过程。

可以采用组合手势和显示动画的方式来控制子组件拖拽时的位置变化情况，实现平滑拖拽效果。

【解决方案】

1. 顺序识别组合手势

（1）长按手势事件LongPressGesture，标记被拖拽元素；

（2）拖动手势事件PanGesture，记录被拖拽元素的位移。

代码示例如下：

GestureGroup(GestureMode.Sequence,
  LongPressGesture({ repeat: true })
    .onAction((event?: GestureEvent) => {
      // 长按标记被拖拽元素
    })
    .onActionEnd(() => {
      // 结束长按，取消标记
    }),
  PanGesture({ fingers: 1, direction: null, distance: 0 })
    .onActionStart(() => {
      // 开始拖动，初始化移动距离
    })
    .onActionUpdate((event: GestureEvent) => {
      // 拖动过程中计算移动距离，根据位移交换相邻元素顺序
    })
    .onActionEnd((event: GestureEvent) => {
      // 处理拖动结束逻辑
    })

2. 在元素缩放和位移过程中，使用显示动画animateTo控制动画效果

代码示例如下：

// 自定义动画曲线
animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
  // 处理拖动过程中元素交换
  this.offsetY += this.ITEM_INTV
  this.dragRefOffset -= this.ITEM_INTV
  this.itemMove(index, index - 1)
})

效果如下：