Cross-device Dragging in HarmonyOS Next —— Free Flow of Files and Texts

As an experienced developer who has been working in the field of Huawei HarmonyOS development for many years, today I'd like to have an in-depth discussion with you about the really cool feature of cross-device dragging in HarmonyOS Next. It enables the free flow of files and texts between different devices, greatly enhancing the user's distributed interaction experience. It's just like building an invisible bridge between devices, making data transmission easy and efficient.

Basic Principle of Cross-device Dragging

The implementation of cross-device dragging relies on two key technologies: keyboard and mouse traversal and the data transmission mechanism.

Keyboard and mouse traversal is like giving "superpowers" to the user's keyboard and mouse operations, allowing them to cross the physical boundaries of devices. When a user operates the mouse on device A, the system can accurately synchronize the mouse movements to device B, as if the mouse is directly connected to device B. Behind this involves complex device communication and input synchronization technologies. Through the network connection between devices (Wi-Fi and Bluetooth, and the best effect is achieved when they are on the same local area network), the operation instructions of the keyboard and mouse are transmitted to the target device in real time, making the user's operations between different devices as smooth and natural as on the same device.

The data transmission mechanism is responsible for transferring the dragged files or text data between devices. When a user starts a dragging operation on device A, the system will capture the dragged data and package it into a specific format. Then, with the help of the capabilities of the distributed system, these data are transmitted to the target device B through the network. On device B, the system unpacks the received data and places it in the specified location according to the corresponding rules, completing the entire dragging process. This process is almost imperceptible to the user. They only need to perform simple dragging operations just like on a local device to achieve the rapid transmission of data between different devices.

Core APIs for Implementing Cross-device Dragging

draggable Property

The draggable property is the foundation for implementing cross-device dragging. In HarmonyOS Next, only when the draggable property of a component is set to true can the component respond to dragging events. This is like attaching a "draggable" label to the component, telling the system that this component can be dragged by the user. For example, if we want to make a text input box draggable, we can set it like this:

TextInput()
  .draggable(true)
  .width('200vp')
  .height('50vp')

onDragStart Event

The onDragStart event is triggered when the component is selected by the mouse and the dragging starts. In this event, developers can set the data to be transmitted and some initial information related to the dragging. For example, in the onDragStart event, we can tell the system what type of data is being dragged (text, file, etc.) and how to process this data. The sample code is as follows:

import { DragEvent } from '@ohos.arkui';

Column() {
    Text('Draggable Text')
      .draggable(true)
      .onDragStart((event: DragEvent) => {
            // Set the text data to be transmitted
            event.data.setData(pasteboard.MIMETYPE_TEXT_PLAIN, 'This is a piece of text to be dragged');
        })
}

onDrop Event

The onDrop event is triggered when the dragging operation is completed, that is, when the mouse is released on the target component of the target device. In this event, developers can obtain the data transmitted from the source device and perform corresponding processing. For example, receive and display the dragged text on the target device:

import { DropEvent } from '@ohos.arkui';

Column() {
    Text('Drop Area')
      .onDrop((event: DropEvent) => {
            let data = event.data;
            let text = data.getPrimaryText();
            if (text) {
                console.log('Received Text:', text);
                // Here, the text can be displayed on the interface or other processing can be done
            }
        })
}

Practical Case: Dragging Images and Texts between a Tablet and a PC

The following is a complete code example to show how to achieve cross-device dragging of images and texts between a tablet and a PC. Suppose we have two pages, one on the tablet as the source device and one on the PC as the target device.

Code for the Tablet (Source Device)

import pasteboard from '@ohos.pasteboard';
import { DragEvent } from '@ohos.arkui';

@Entry
@Component
struct SourceDevicePage {
    build() {
        Column() {
            // Draggable text
            Text('Example of Text Dragged across Devices')
              .draggable(true)
              .onDragStart((event: DragEvent) => {
                    event.data.setData(pasteboard.MIMETYPE_TEXT_PLAIN, 'Text content dragged across devices');
                })
            // Draggable image (assuming the image resource name is imageResource)
            Image($r('app.media.imageResource'))
              .width(100)
              .height(100)
              .draggable(true)
              .onDragStart((event: DragEvent) => {
                    // Here, assume the method to get the binary data of the image is getImageBinaryData
                    let imageData = getImageBinaryData(); 
                    event.data.setData(pasteboard.MIMETYPE_IMAGE_PNG, imageData);
                })
        }
    }
}

Code for the PC (Target Device)

import pasteboard from '@ohos.pasteboard';
import { DropEvent } from '@ohos.arkui';

@Entry
@Component
struct TargetDevicePage {
    build() {
        Column() {
            // Area to receive the dragged data
            Text('Drag the content here')
              .width('200vp')
              .height('100vp')
              .onDrop((event: DropEvent) => {
                    let data = event.data;
                    let mimeType = data.getPrimaryMimeType();
                    if (mimeType === pasteboard.MIMETYPE_TEXT_PLAIN) {
                        let text = data.getPrimaryText();
                        console.log('Received Text:', text);
                        // The text can be displayed on the interface
                    } else if (mimeType === pasteboard.MIMETYPE_IMAGE_PNG) {
                        let imageData = data.getPrimaryImage();
                        if (imageData) {
                            // Here, the image can be displayed on the interface. Assume the method to display the image is displayImage
                            displayImage(imageData); 
                        }
                    }
                })
        }
    }
}

In this practical case, the tablet sets draggable text and images, and sets the data to be transmitted respectively in the onDragStart event. The PC has a receiving area, and in the onDrop event, it determines whether the data is text or an image according to the MIME type of the data and performs corresponding processing.

Through this code, we have achieved the function of cross-device dragging of images and texts between the tablet and the PC. Of course, in practical applications, more details need to be considered, such as the validation of data legality, error handling, and the optimization of the interface, etc., to enhance the user experience. But this basic example has already demonstrated the core implementation method of cross-device dragging, and I hope it can help you get started quickly.