介紹

本示例分別通過onItemDrop()和onDrop()回調(diào)，實現(xiàn)子組件在Grid和List中的子組件位置交換。

效果圖預覽

使用說明：

1. 拖拽Grid中子組件，到目標Grid子組件位置，進行兩者位置互換。
2. 拖拽List中子組件，到目標List子組件位置，進行兩者位置互換。

實現(xiàn)思路

1.在Grid組件中，通過editMode()打開編輯模式、通過onItemDragStart()指定拖拽時樣式、通過onItemDrop()指定拖拽釋放時的行為。

Grid() { ... }
.editMode(true) // 設(shè)置Grid進入編輯模式
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => { // 設(shè)置拖拽過程中顯示的圖形this.movedItem = this.appInfoList[itemIndex]; // 記錄原位置子組件信息return this.itemWhileDrag(); 
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { // 拖拽釋放時，觸發(fā)回調(diào)// isSuccess=false時，說明drop的位置在grid外部；insertIndex > length時，說明有新增元素的事件發(fā)生if (isSuccess && insertIndex < this.appInfoList.length) {this.changeIndex(itemIndex, insertIndex); // 互換子組件index值}
})

2.在List組件中，通過ListItem的onDragStart()方法指定拖拽開始時的行為，通過List的onTouch()指定拖拽釋放時的行為。

List({ space: LIST_SPACE }) {ForEach(this.appInfoList, (item: AppInfo, index) => {ListItem() { ... }.onDragStart(() => {item.visible = false; // 拖拽時，設(shè)置子組件原位置圖標不可見}).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; // 通過參數(shù)extraParams獲取原位置子組件index值this.changeIndex(this.dragIndex, jsonString.insertIndex); // 互換子組件index值this.appInfoList[jsonString.insertIndex].visible = true; // 完成互換后，設(shè)置子組件原位置圖標不可見
})

高性能知識點

不涉及

模塊依賴

@ohos/routermodule(動態(tài)路由)

工程結(jié)構(gòu)&模塊類型

dragandexchange                  // har類型               
|---pages                                       
|---|---Launcher.ets             // 頁面層-方案主頁面
|---view                                        
|---|---GridSceneView.ets        // 視圖層-Grid拖拽頁面             
|---|---ListSceneView.ets        // 視圖層-List拖拽頁面  
|---model                                     
|---|---AppInfo.ets              // 模型層-App信息模型 

如果大家還沒有掌握鴻蒙，現(xiàn)在想要在最短的時間里吃透它，我這邊特意整理了《鴻蒙開發(fā)學習手冊》（共計890頁），希望對大家有所幫助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鴻蒙開發(fā)學習手冊》：

如何快速入門：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.構(gòu)建第一個ArkTS應用
3.……

開發(fā)基礎(chǔ)知識：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.應用基礎(chǔ)知識
2.配置文件
3.應用數(shù)據(jù)管理
4.應用安全管理
5.應用隱私保護
6.三方應用調(diào)用管控機制
7.資源分類與訪問
8.學習ArkTS語言
9.……

基于ArkTS 開發(fā)：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability開發(fā)
2.UI開發(fā)
3.公共事件與通知
4.窗口管理
5.媒體
6.安全
7.網(wǎng)絡(luò)與鏈接
8.電話服務
9.數(shù)據(jù)管理
10.后臺任務(Background Task)管理
11.設(shè)備管理
12.設(shè)備使用信息統(tǒng)計
13.DFX
14.國際化開發(fā)
15.折疊屏系列
16.……

鴻蒙語法ArkTS、TypeScript、ArkUI等…視頻教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鴻蒙生態(tài)應用開發(fā)白皮書V2.0PDF：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

HarmonyOS APP開發(fā)教程案列：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3