DEV Community

SameX
SameX

Posted on

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 realization of cross-device dragging relies on two key technologies: keyboard and mouse traversal, and the data transmission mechanism.

Keyboard and mouse traversal is like endowing the user's keyboard and mouse operations with "superpowers", 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 movement 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 in 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 the user starts the 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 as they would 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 basis 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. It's like pasting a "draggable" label on 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')
Enter fullscreen mode Exit fullscreen mode

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');
        })
}
Enter fullscreen mode Exit fullscreen mode

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
            }
        })
}
Enter fullscreen mode Exit fullscreen mode

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

The following is a complete code example to show how to implement 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.

Tablet (Source Device) Code 

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);
                })
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

PC (Target Device) Code 

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, assuming the method to display the image is displayImage
                            displayImage(imageData); 
                        }
                    }
                })
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

In this practical case, the tablet sets draggable text and an image, 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 implemented 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 verification of data legality, error handling, and interface optimization, 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.

Top comments (0)