实现思路

1、创建一个具名的 class来定义列表项的数据结构。

2、使用 @State 管理一个 CourseItem 类型的数组。

3、使用 List 和 ForEach 渲染列表，ForEach 的 keyGenerator 使用模型实例的唯一ID。

4、手势处理：为每个 ListItem 绑定 PanGesture，在 onActionUpdate 中计算目标位置，在 onActionEnd 中交换数组中的 CourseItem 实例。

5、通过 @State 变量控制被拖拽项和目标位置的样式，并使用 translate 和 animation 实现平滑的动画效果。

使用场景

1、课程管理应用中的学习顺序调整。

2、团队协作工具中的任务优先级排序。

3、灌溉系统中的灌溉顺序排序

等等。

实现效果

长按模块即可拖动。

完整代码

class CourseItem {
  public id: number;
  public text: string;

  constructor(id: number, text: string) {
    this.id = id;
    this.text = text;
  }
}

@Entry
@Component
struct DraggableListDemo {
  // 使用定义好的 CourseItem class 作为数组元素的类型
  [@State](/user/State) listItems: Array<CourseItem> = [
    new CourseItem(1, '鸿蒙开发基础'),
    new CourseItem(2, 'ArkTS语法详解'),
    new CourseItem(3, '组件与布局'),
    new CourseItem(4, '状态管理'),
    new CourseItem(5, '动画与手势'),
    new CourseItem(6, '网络与数据持久化'),
    new CourseItem(7, '性能优化实践')
  ];

  [@State](/user/State) draggingIndex: number = -1;
  [@State](/user/State) dragOffsetY: number = 0;
  [@State](/user/State) draggingOverIndex: number = -1;

  private readonly ITEM_HEIGHT: number = 80;

  build() {
    Column() {
      Text('拖拽课程以调整顺序')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 })

      List({ space: 10 }) {
        // ForEach 中使用 CourseItem 类型
        ForEach(this.listItems, (item: CourseItem, index: number) => {
          ListItem() {
            this.ListItemBuilder(item, index)
          }
          // keyGenerator 使用 item 的 id，确保唯一性和稳定性
        }, (item: CourseItem) => item.id.toString())
      }
      .listDirection(Axis.Vertical)
      .edgeEffect(EdgeEffect.Spring)
      .layoutWeight(1)
      .padding({ left: 12, right: 12 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
  }

  @Builder
  // Builder 方法的参数也使用 CourseItem 类型
  ListItemBuilder(item: CourseItem, index: number) {
    Row() {
      Text(item.text)
        .fontSize(18)
        .fontColor('#333333')
    }
    .width('100%')
    .height(this.ITEM_HEIGHT)
    .padding({ left: 16, right: 16 })
    .backgroundColor(this.draggingIndex === index ? '#FFE0B2' : (this.draggingOverIndex === index ? '#E1F5FE' : '#FFFFFF'))
    .borderRadius(12)
    .justifyContent(FlexAlign.Start)
    .alignItems(VerticalAlign.Center)
    .shadow({
      radius: this.draggingIndex === index ? 8 : 2,
      color: '#1A000000',
      offsetX: 0,
      offsetY: this.draggingIndex === index ? 4 : 1
    })
    .translate({
      y: this.draggingIndex === index ? this.dragOffsetY : 0
    })
    .animation({
      duration: 250,
      curve: Curve.EaseInOut,
      delay: 0
    })
    .gesture(
      PanGesture({ fingers: 1, direction: PanDirection.Vertical })
        .onActionStart((event: GestureEvent) => {
          this.draggingIndex = index;
          this.dragOffsetY = 0;
        })
        .onActionUpdate((event: GestureEvent) => {
          this.dragOffsetY = event.offsetY;
          const totalOffset = this.dragOffsetY;
          const targetIndex = Math.round(totalOffset / this.ITEM_HEIGHT) + index;

          if (targetIndex < 0 || targetIndex >= this.listItems.length || targetIndex === index) {
            this.draggingOverIndex = -1;
            return;
          }
          this.draggingOverIndex = targetIndex;
        })
        .onActionEnd(() => {
          if (this.draggingOverIndex !== -1 && this.draggingIndex !== this.draggingOverIndex) {
            // 5. 操作的是 CourseItem 实例数组
            const newList = [...this.listItems];
            const draggedItem = newList[this.draggingIndex];

            newList.splice(this.draggingIndex, 1);
            newList.splice(this.draggingOverIndex, 0, draggedItem);

            this.listItems = newList;
          }

          this.draggingIndex = -1;
          this.draggingOverIndex = -1;
          this.dragOffsetY = 0;
        })
    )
  }
}