使用场景
在我们的APP中存在多个应用菜单，并且支持用户编辑菜单，可以通过手势拖动交换菜单的位置，在迁移该功能的时候，我们发现鸿蒙的Grid组件自带类似功能，不过实际使用还是有一些注意事项，笔者在这里记录一下，希望对需要的朋友能够提供一些帮助。
注意事项
关于Grid的组件使用方法都可以在鸿蒙官网文档找到，这里按下不表，我们主要讲述手势拖动实现的注意事项。
首先第一步，我们需要开启Grid组件的编辑模式，即设置editMode(true)。第二步，我们需要通过onItemDragStart方法指定拖拽时的样式。第三步，我们再通过onItemDrop方法指定拖拽释放时的具体操作。
具体实现
具体实现代码如下所示
Grid() { ... }
.editMode(true) // 设置Grid进入编辑模式
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => { // 设置拖拽过程中显示的图形
this.movedItem = this.appInfoList[itemIndex]; // 记录原位置子组件信息
return this.itemWhileDrag();
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { // 拖拽释放时，触发回调
// isSuccess=false时，说明drop的位置在grid外部；insertIndex > length时，说明有新增元素的事件发生
if (isSuccess && insertIndex < this.appInfoList.length) {
this.changeIndex(itemIndex, insertIndex); // 互换子组件index值
}
})
补充
下面再补充一下List组件中拖拽的实现，List组件需要通过ListItem的onDragStart()方法指定拖拽开始时的行为，通过List的onTouch()指定拖拽释放时的行为，具体实现代码如下
List({ space: LIST_SPACE }) {
ForEach(this.appInfoList, (item: AppInfo, index) => {
ListItem() { ... }
.onDragStart(() => {
item.visible = false; // 拖拽时，设置子组件原位置图标不可见
})
.onTouch((event: TouchEvent) => { // 拖拽释放时，记录目标位置子组件index值
if (event.type === TouchType.Down) {
this.dragIndex = index;
}
})
})
}
.onDrop((event: DragEvent, extraParams: string) => {
let jsonString: JsonObjType = JSON.parse(extraParams) as JsonObjType; // 通过参数extraParams获取原位置子组件index值
this.changeIndex(this.dragIndex, jsonString.insertIndex); // 互换子组件index值
this.appInfoList[jsonString.insertIndex].visible = true; // 完成互换后，设置子组件原位置图标不可见
})
总结
以上就是Grid和List组件拖拽移动的实现方式，希望能够提供一些帮助
