鸿蒙(HarmonyOS)应用开发实战——Grid和List内拖拽交换子组件位置

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 被裁员后，踏上了鸿蒙开发求职之路
• 持续更新中……

介绍

本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。

效果图预览

使用说明：

1. 拖拽Grid中子组件，到目标Grid子组件位置，进行两者位置互换。
2. 拖拽List中子组件，到目标List子组件位置，进行两者位置互换。

实现思路

1. 在Grid组件中，通过editMode()打开编辑模式、通过onItemDragStart()指定拖拽时样式、通过onItemDrop()指定拖拽释放时的行为。

   Grid() {
   
    ... }
   .editMode(true) // 设置Grid进入编辑模式
   .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
   
    // 设置拖拽过程中显示的图形
     this.movedItem = this