# 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**: 22
- **Created**: 2024-09-29
- **Last Updated**: 2024-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Drag-and-Drop Framework Development
## Overview
This sample shows how to create interactive UI elements that allow the user to drag and drop an image, rich text, a text box, and a list.

## Preview

###  

| Starting Dragging                           | Allow Drop                          | Disallow Drop                          |
|---------------------------------|--------------------------------|---------------------------------|
| ![image](screenshots/start_EN.png) | ![image](screenshots/drag_EN.png) | ![image](screenshots/ndrag_EN.png) |


## Project Directory

```
 ├─entry/src/main/ets/                       // Home page of the app
 │   ├──common
 │   │  ├──constants                         
 │   │  │  └─Constants.ets                   // Constants
 │   │  └──utils          
 │   │     └──Logger.ets                     // Logging utility
 │   ├──entryability
 │   │  └──EntryAbility.ets                  // Entry ability
 │   ├──entrybackupability
 │   │  └─EntryBackupAbility.ets             // Backup and restore ability
 │   ├──pages                 
 │   │  ├──hyperlink
 │   │  │  └─HyperLink.ets                   // Drag and drop of a hyperlink        
 │   │  ├──image
 │   │  │  └─Image.ets                       // Drag and drop of an image       
 │   │  ├──list
 │   │  │  └─List.ets                        // Drag and drop of a list   
 │   │  ├──richeditor
 │   │  │  └─RichEditor.ets                  // Drag and drop of rich text     
 │   │  ├──testarea
 │   │  │  └─TextArea.ets                    // Drag and drop of multi-line text
 │   │  ├──textinput
 │   │  │  └─TextInput.ts                    // Drag and drop of single-line text
 │   │  └──Index.ets                         // Home page entry
 │   └──view                                 // Styles of the view
 │      ├──TitleBar.ets
 │      └──UserButton.ets
 ├──entry/src/main/resource                  // Static resources of the app
 └──entry/src/main/module.json5              // Module configuration
 
```
## How to Use
1. The home page displays the entry component for the drag-and-drop functionality. 

2. Tap to go to the drag-and-drop page of different components. Select and hold the target content and drag it.

3. Drag the content to the component that allows drop.

4. In the **List** component, select the content to be dragged in a column, and then drag the selected content to another column.

## How to Implement
1. The drag framework implements drag-and-drop of data for the following components by default. For those components, you only need to set the **draggable** property to **true**.

2. By default, data can be dragged from the following components:

   **Search**, **TextInput**, **TextArea**, **RichEditor**, **Text**, **Image**, **FormComponent**, **Hyperlink**

3. By default, data can be dropped to the following components: 

   **Search**, **TextInput**, **TextArea**, **Video**

4. You can also customize drag-and-drop response via common drag events.

5. To implement drag-and-drop for other components, you need to set **draggable** to **true** and implement data transmission in APIs such as **onDragStart()**.

## Required Permissions
N/A

## Constraints
1. The sample app is supported only on Huawei phones running the standard system.

2. The HarmonyOS version must be HarmonyOS NEXT Developer Beta1 or later.

3. The DevEco Studio version must be DevEco Studio NEXT Developer Beta1 or later.

4. The HarmonyOS SDK version must be HarmonyOS NEXT Developer Beta1 or later.