本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

   开发中，onMove是用于实现拖拽排序功能的核心接口，主要作用于List组件与ForEach/LazyForEach/Repeat的组合场景。

一、功能

• 作用：当用户在List组件中通过长按或拖拽操作改变列表项顺序时，onMove会捕获数据源位置变化事件（起始索引from和目标索引to），开发时可以通过此回调同步更新数据源，从而实现UI的动态排序。
• 生效条件：
  • 父容器必须是List组件
  • 列表项必须通过ForEach/LazyForEach/Repeat生成
  • 每个迭代项需生成一个ListItem组件

二、参数与回调类型

1. 主回调函数

onMove(handler: (from: number, to: number) => void, eventHandler?: ItemDragEventHandler)

• handler：必填参数，接收两个数字参数 from（原位置索引）和 to（目标位置索引），开发时需在此函数内更新数据源顺序。
• eventHandler（API 20+）：可选参数，定义拖拽过程中的附加事件回调，如长按、拖拽开始等。

   2. 事件回调对象（ItemDragEventHandler）

三、使用示例（API 12+）

// 在List组件的ForEach中使用onMove
List() {
  ForEach(this.arr, (item: string) => {
    ListItem() {
      Text(item).fontSize(16)
    }
  })
  .onMove((from: number, to: number) => {
    const tmp = this.arr.splice(from, 1); // 移除原位置元素
    this.arr.splice(to, 0, ...tmp);       // 插入到目标位置
  })
}

四、扩展事件监听（API 20+）

// 添加拖拽事件回调
.onMove(
  (from, to) => {
    // 更新数据源逻辑
  },
  {
    onLongPress: (index) => { console.log('长按项索引:', index); },
    onDragStart: (index) => { console.log('拖拽开始项:', index); },
    onDrop: (index) => { console.log('拖拽结束落位项:', index); }
  }
)

五、注意事项：

1. 数据源一致性：必须在onMove中同步修改数据源顺序，否则UI动画与数据会不一致。
2. API版本支持：
   • 基础功能：API 12+ 支持
   • 扩展事件回调（如onDrop）：API 20+ 支持
3. 元服务兼容性：基础接口从API 12开始支持元服务，扩展事件从API 20开始支持。