简介

该文主要提供文字拖拽的场景及最佳实践示例。

开发环境

DevEco Studio： DevEco Studio NEXT Release（Build Version： 5.0.3.900）

系统： OpenHarmony 5.0.0.71

设备： DAYU200（rk3568）

最佳实践示例

Text组件拖拽

Text组件默认可拖拽，若要实现长按选中浮起后拖拽的逻辑，则应给Text组件设置CopyOptions属性，并且设置draggable属性为true。
Search、TextInput、TextArea 、RichEditor组件均默认支持可落入,若要实现自定义组件内落入文字，则可按如下方式实现：

import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData';

@Entry
@Component
struct DragTest4 {
  @State message: string = '';
  controller: RichEditorController = new RichEditorController();
  options: RichEditorOptions = { controller: this.controller };

  build() {
    Column() {
      // 文字拖出
      Column() {
        Text('123456')
          .copyOption(CopyOptions.InApp)
          .draggable(true).fontSize(100)
      }
      .width('70%').height('30%')
      .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
      .alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)


      // 文字拖入
      Column() {
        Text(this.message).copyOption(CopyOptions.InApp).draggable(true).width('100%').height('20%').textAlign(TextAlign.Center)
          .allowDrop([uniformTypeDescriptor.UniformDataType.PLAIN_TEXT])
            // Text组件需在onDrop回调中实现落入数据的处理
          .onDrop((event: DragEvent, extraParams: string) => {
            let data: UnifiedData = event.getData();
            let records: Array<unifiedDataChannel.UnifiedRecord> = data.getRecords();
            if (records[0].getType() === uniformTypeDescriptor.UniformDataType.PLAIN_TEXT) {
              let plainText: unifiedDataChannel.PlainText = records[0] as unifiedDataChannel.PlainText;
              this.message = plainText.textContent;
            }
          })
        TextArea({ placeholder: 'please input words' }).copyOption(CopyOptions.InApp).draggable(true).width('100%').height('20%').textAlign(TextAlign.Center)
        Search({ placeholder: 'please input words' }).copyOption(CopyOptions.InApp).draggable(true).width('100%').height('20%').textAlign(TextAlign.Center)
        TextInput({ placeholder: 'please input words' }).copyOption(CopyOptions.InApp).draggable(true).width('100%').height('20%').textAlign(TextAlign.Center)
        RichEditor(this.options).draggable(true).width('100%').height('20%')
      }
      .width('70%').height('50%')
      .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
      .alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
    }
    .width('100%').height('100%')
  }
}

自定义子组件拖拽

自定义子组件拖拽实际场景为IM应用Chat界面消息气泡，本质上是对气泡组件本身进行拖拽。但是在OnDragStart回调中设置拖拽数据为气泡组件上所承载的文字消息内容，具体实现可如下所示：

import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData';

@Entry
@Component
struct DragTest5 {
  @State message: string = 'Hello World';
  @State text: string = '';

  build() {
    Column() {
      // 拖出
      Column() {
        Child({text: this.message})
          .width('50%').height('50%').draggable(true).backgroundColor(Color.Green)
          .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
          .onDragStart((event: DragEvent) => {
            let data: unifiedDataChannel.PlainText = new unifiedDataChannel.PlainText();
            data.abstract = this.message;
            data.textContent = this.message;
            (event as DragEvent).setData(new unifiedDataChannel.UnifiedData(data));
          })
      }
      .width('70%').height('40%')
      .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
      .alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)

      // 拖入
      Column() {
        Text(this.text)
          .width('50%').height('50%').backgroundColor(Color.Red).textAlign(TextAlign.Center)
          .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
          .onDrop((event: DragEvent, extraParams: string) => {
            let data: UnifiedData = event.getData();
            let records: Array<unifiedDataChannel.UnifiedRecord> = data.getRecords();
            if (records[0].getType() === uniformTypeDescriptor.UniformDataType.PLAIN_TEXT) {
              let plainText: unifiedDataChannel.PlainText = records[0] as unifiedDataChannel.PlainText;
              this.text = plainText.textContent;
            }
          })
      }
      .width('70%').height('40%')
      .border({ width: 2, color: Color.Gray, radius: 5, style: BorderStyle.Dotted })
      .alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
    }
    .width('100%').height('100%')
  }
}

@Component
struct Child{
  @State text: string = '';
  build(){
    Column(){
      Text(this.text).copyOption(CopyOptions.InApp).draggable(true)
    }
    .width('100%').height('100%')
    .alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  }
}