实现List拖动功能鸿蒙示例代码

LongPressGesture({ fingers: 1, repeat: false, duration: 100 })
    .onAction(() => {
      this.startDragItem(index)
    }),
  PanGesture()
    .onActionStart(() => {
      this.startDragItem(index)
    })
    .onActionUpdate((event: GestureEvent) => {
      this.dragOffsetY = event.offsetY - (this.dragIndex - this.originDragIndex) * this.itemTotalHeight +
      this.listScroller.currentOffset().yOffset - this.originListOffsetY
      // 限制dragOffsetY上下界
      let maxOffsetY = (this.arr.length - this.dragIndex - 1) * this.itemTotalHeight - this.listMargin
      let minOffsetY = -this.dragIndex * this.itemTotalHeight + this.listMargin
      this.dragOffsetY = Math.min(maxOffsetY, this.dragOffsetY)
      this.dragOffsetY = Math.max(minOffsetY, this.dragOffsetY)
      this.relativeOffsetY = this.dragOffsetY + this.dragIndex * this.itemTotalHeight + this.itemHeight / 2
      this.itemOffsetList[this.dragIndex] = this.dragOffsetY
      let fingerInfo = event.fingerList[0]
      let clickPercentY =
        (fingerInfo.globalY - Number(this.listArea.globalPosition.y)) / Number(this.listArea.height)
      if (clickPercentY > 0.8 && !this.listScroller.isAtEnd()) {
        let scrollVelocity = clickPercentY > 0.9 ? 4 : 2
        if (this.listMaxScrollOffsetY - this.listScroller.currentOffset().yOffset > scrollVelocity + 5) {
          this.listScroller.scrollTo({
            xOffset: 0,
            yOffset: this.listScroller.currentOffset().yOffset += scrollVelocity
          })
        }
      } else if (clickPercentY < 0.2 && this.listScroller.currentOffset().yOffset >= 0) {
        let scrollVelocity = clickPercentY < 0.1 ? 4 : 2
        if (this.listScroller.currentOffset().yOffset > scrollVelocity + 5) {
          this.listScroller.scrollTo({
            xOffset: 0,
            yOffset: this.listScroller.currentOffset().yOffset -= scrollVelocity
          })
        }
      }
      // 获取当前滑动到的index
      let insertIndex = Math.trunc(this.relativeOffsetY / this.itemTotalHeight)
      if (this.dragIndex < insertIndex) {
        this.increaseDragIndex(event.offsetY)
      } else if (this.dragIndex > insertIndex) {
        this.decreaseDragIndex(event.offsetY)
      }
    })
    .onActionEnd(() => {
      this.endDragItem()
    })
).onCancel(() => {
  this.cancelDrag()
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.