[HarmonyOS Next示例代码]拖拽框架开发实践

拖拽框架开发实践

介绍

本示例设置组件是否可以响应拖拽事件，实现图片、富文本、文本、输入框、列表等组件的拖拽功能。

效果预览

效果预览

启动拖拽	允许落入	不允许落入

工程目录

 ├─entry/src/main/ets/                       // 应用首页
 │   ├──common
 │   │  ├──constants                         
 │   │  │  └─Constants.ets                   // 常量类
 │   │  └──utils          
 │   │     └─Logger.ets                      // 日志打印类
 │   ├──entryability
 │   │  └─EntryAbility.ets                   // 程序入口类
 │   ├──entrybackupability
 │   │  └─EntryBackupAbility.ets             // 备份恢复
 │   ├──pages                 
 │   │  ├──hyperlink
 │   │  │  └─HyperLink.ets                   // 超链接拖拽        
 │   │  ├──image
 │   │  │  └─Image.ets                       // 图片拖拽        
 │   │  ├──list
 │   │  │  └─List.ets                        // 列表拖拽    
 │   │  ├──richeditor
 │   │  │  └─RichEditor.ets                  // 富文本拖拽      
 │   │  ├──testarea
 │   │  │  └─TextArea.ets                    // 多行文本拖拽
 │   │  ├──textinput
 │   │  │  └─TextInput.ts                    // 单行文本拖拽
 │   │  └──Index.ets                         // 主页入口
 │   └──view                                 // 定义通用样式
 │      ├──TitleBar.ets
 │      └──UserButton.ets
 ├──entry/src/main/resource                  // 应用静态资源
 └──entry/src/main/module.json5              // 模块配置相关
 

使用说明

1.首页展示拖拽入口组件。

2.点击跳转到不同组件的拖拽页面，选中内容后长按进行拖拽。

3.将组件里的内容拖到应用内支持落入的组件内。

4.List组件内首先选择其中一列要拖拽的内容，然后将选中的内容拖拽到另一列。

具体实现

1.拖拽框架对以下组件实现了默认的拖拽能力，支持对数据的拖入和拖出响应，开发者只需要将这些组件的draggable属性设置为true，即可使用默认的拖拽能力。

2.默认支持拖出能力的组件(可从组件上拖出数据): Search、TextInput、TextArea、RichEditor、Text、Image、FormComponent、Hyperlink

3.默认支持拖入能力的组件(目标组件可响应拖入数据): Search、TextInput、TextArea、Video

4.开发者也可以通过实现通用拖拽事件来自定义拖拽响应。

5.其他组件需要开发者将draggable属性设置为true，并在onDragStart等接口中实现数据传输相关内容，才能正确处理拖拽。

相关权限

不涉及

约束与限制

1.本示例仅支持标准系统上运行，支持设备：华为手机。

2.HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。

3.DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。

4.HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。

DragFramework: 本示例设置组件响应拖拽事件，实现图片、富文本、文本、输入框、列表等组件的拖拽功能。

HarmonyOS next 示例代码全集