# DragFramework

**Repository Path**: wangzee/DragFramework

## Basic Information

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

## Statistics

- **Stars**: 1
- **Forks**: 22
- **Created**: 2025-05-13
- **Last Updated**: 2025-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Implement Custom Drag-and-Drop of Components

## Overview

This sample is based on drag framework of ArkUI 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, and customizes the drag-and-drop response by setting the interface
information in the drag-and-drop event, so as to implement drag-and-drop scenarios such as watermark,
custom background and AI recognition.

## Preview

###     

| Starting Dragging                  | Allow Drop                        | Disallow Drop                      |
|------------------------------------|-----------------------------------|------------------------------------|
| ![image](screenshots/start.en.png) | ![image](screenshots/drag.en.png) | ![image](screenshots/ndrag.en.png) |

## How to Use

1. The home page displays the entry component for the drag-and-drop functionality.

2. Tap the **ImageDrag**, **HyperLinkDrag**, **RichEditorDrag**, **TextInputDrag**, **TextAreaDrag** buttons to the
   drag-and-drop page of the corresponding component. Select and hold the target content and drag it
   to the component that allows drop.

3. Tap the **ListDrag** button to the drag-and-drop page of list items. Select the items to be dragged in a list, and
   then drag the selected items to another list.

4. Tap the **BackgroundCustomization** button to the page of customizing drag-and-drop background, and display the
   custom background image during the drag-and-drop process.

5. Tap the **WatermarkAdded** button to the page of adding watermarks to the dragged image, add a watermark to the
   result image after dropping it.

6. Tap the **AIRecognition** button to the page of AI text recognition, display the text recognition result after the
   image is dropped.

7. Tap the **SpliceScreenDrag** button to create a UIAbility, trigger it to enter the pending split screen state through
   gestures, and enter any dragged page, then click the app icon on the desktop again to open a new window and enter the
   drag and drop page to achieve split screen dragging.

8. This example supports drag-and-drop across devices.

## Project Directory

```
 ├─entry/src/main/ets/                       // Home page of the app
 │   ├──common
 │   │  └──utils          
 │   │     └──Utils.ets                      // Util fuctions  
 │   ├──entryability
 │   │  └──EntryAbility.ets                  // Entry ability
 │   ├──entrybackupability
 │   │  └─EntryBackupAbility.ets             // Backup and restore ability
 │   ├──pages
 │   │  ├──airecognition
 │   │  │  └─AIRecognition.ets               // AI Recognition
 │   │  ├──background
 │   │  │  └─Background.ets                  // Customize the background                     
 │   │  ├──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     
 │   │  ├──textarea
 │   │  │  └─TextArea.ets                    // Drag and drop of multi-line text
 │   │  ├──textinput
 │   │  │  └─TextInput.ets                   // Drag and drop of single-line text
 │   │  ├──watermark
 │   │  │  └─Watermark.ets                   // Add the watermark 
 │   │  └──Index.ets                         // Home page entry
 │   ├──singletonability
 │   │  └─SingletonAbility.ets               // Singleton mode ability  
 │   └──view                                 // Styles of the view
 │      ├──SplitScreenButton.ets  
 │      └──UserButton.ets
 ├──entry/src/main/resources                 // Static resources of the app
 └──entry/src/main/module.json5              // Module configuration
 
```

## 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. Customize drag-and-drop response via common drag events. Customize the background and add watermarks in the **onDragStart()**, and realize AI recognition of the dragged content in the **onDrop()**.

5. Use **singleton** to implement split-screen drag-and-drop of the same app.

## 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 5.0.0 Developer Release or later.

3. The DevEco Studio version must be HarmonyOS 5.0.0 Developer Release or later.

4. The HarmonyOS SDK version must be HarmonyOS 5.0.0 Developer Release or later.