# DragFramework

**Repository Path**: caoliwen1/DragFramework

## Basic Information

- **Project Name**: DragFramework
- **Description**: 本示例设置组件响应拖拽事件，实现图片、富文本、文本、输入框、列表等组件的拖拽功能。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 20
- **Created**: 2024-09-29
- **Last Updated**: 2024-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

## 效果预览

### 效果预览

| 启动拖拽                            | 允许落入                           | 不允许落入                           |
|---------------------------------|--------------------------------|---------------------------------|
| ![image](screenshots/start.png) | ![image](screenshots/drag.png) | ![image](screenshots/ndrag.png) |


## 工程目录

```
 ├─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及以上。