1# Drag Event 2 3A drag event is triggered when a component is dragged. 4 5> **NOTE** 6> 7> This feature is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> The resource files preset in the application (that is, the resource files that are contained in the HAP file before the application is installed) can be dragged and dropped only within the application. 10 11The ArkUI framework implements the drag and drop capability for some components, allowing them to serve as the drag source (from which data can be dragged) or drop target (to which data can be dropped). To enable drag and drop for these components, you only need to set their [draggable](ts-universal-attributes-drag-drop.md) attribute to **true**.<!--RP1--><!--RP1End--> 12 13- The following component supports drag actions by default: [Search](ts-basic-components-search.md), [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md), [RichEditor](ts-basic-components-richeditor.md), [Text](ts-basic-components-text.md), [Image](ts-basic-components-image.md), <!--Del-->[FormComponent](ts-basic-components-formcomponent-sys.md), <!--DelEnd-->[Hyperlink](ts-container-hyperlink.md) 14 15- The following component supports drop actions by default: [Search](ts-basic-components-search.md), [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md), [Video](ts-media-components-video.md) 16 17You can also define drag responses by implementing common drag events. 18 19To enable drag and drop for other components, you need to set the **draggable** attribute to **true** and implement data transmission in APIs such as **onDragStart**. 20 21## onDragStart 22 23onDragStart(event: (event: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo) 24 25Triggered when the component bound to the event is dragged for the first time. A drag operation is recognized only when the long press time is 500 ms or longer and the dragging distance is 10 vp or larger. 26 27For components that can serve as the drag source by default, a custom **onDragStart** event, if set, is executed and: 28- If a custom drag preview is returned, it is used in place of the default drag preview. 29- If drag data is set, it is used in place of the default drag data. 30 31No custom drag preview is supported for dragging selected text in the following components: [Text](ts-basic-components-text.md), [Search](ts-basic-components-search.md), [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md), [RichEditor](ts-basic-components-richeditor.md) 32 33**Atomic service API**: This API can be used in atomic services since API version 11. 34 35**Event priority**:<br>Long press time < 500 ms: Long press event > Drag event<br>Other cases: Drag event > Long press event 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39**Parameters** 40 41| Name | Type | Mandatory| Description | 42| ----------- | ------------------------------- | ---- | ------------------ | 43| event | (event: [DragEvent](#dragevent), extraParams?: string) => [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo) | Yes | Callback function.<br> **NOTE**<br> **event**: information about the drag event.<br> **extraParams**: extra information about the drag event. The value needs to be parsed into the JSON format. For details, see [extraParams](#extraparams).| 44 45**Return value** 46 47| Type | Description | 48| ------------------------------------------------------------ | ------------------------ | 49| [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo) | Component information displayed during dragging.<br>**NOTE**<br>The global builder is not supported.| 50 51## onDragEnter 52 53onDragEnter(event: (event: DragEvent, extraParams?: string) => void) 54 55Called when a dragged item enters a valid drop target. This event takes effect only when a listener for the [onDrop](#ondrop) event is enabled. 56 57**Atomic service API**: This API can be used in atomic services since API version 11. 58 59**System capability**: SystemCapability.ArkUI.ArkUI.Full 60 61**Parameters** 62 63| Name | Type | Mandatory| Description | 64| ----------- | ------------------------------- | ---- | ------------------------------ | 65| event | (event: [DragEvent](#dragevent), extraParams?: string) => void | Yes | Callback function.<br>**NOTE**<br> **event**: information about the drag event, including the coordinates of the item that is being dragged.<br> **extraParams**: additional information about the drag event. The value needs to be parsed into the JSON format. For details, see [extraParams](#extraparams).| 66 67## onDragMove 68 69onDragMove(event: (event: DragEvent, extraParams?: string) => void) 70 71Called when a dragged item moves in a valid drop target. This event takes effect only when a listener for the [onDrop](#ondrop) event is enabled. 72 73**Atomic service API**: This API can be used in atomic services since API version 11. 74 75**System capability**: SystemCapability.ArkUI.ArkUI.Full 76 77**Parameters** 78 79| Name | Type | Mandatory| Description | 80| ----------- | ------------------------------- | ---- | ------------------------------ | 81| event | (event: [DragEvent](#dragevent), extraParams?: string) => void | Yes | Callback function.<br>**NOTE**<br> **event**: information about the drag event, including the coordinates of the item that is being dragged.<br> **extraParams**: additional information about the drag event. The value needs to be parsed into the JSON format. For details, see [extraParams](#extraparams).| 82 83## onDragLeave 84 85onDragLeave(event: (event: DragEvent, extraParams?: string) => void) 86 87Called when a dragged item leaves a valid drop target. This event takes effect only when a listener for the [onDrop](#ondrop) event is enabled. 88 89**Atomic service API**: This API can be used in atomic services since API version 11. 90 91**System capability**: SystemCapability.ArkUI.ArkUI.Full 92 93**Parameters** 94 95| Name | Type | Mandatory| Description | 96| ----------- | ------------------------------- | ---- | ------------------------------ | 97| event | (event: [DragEvent](#dragevent), extraParams?: string) => void | Yes | Callback function.<br>**NOTE**<br> **event**: information about the drag event, including the coordinates of the item that is being dragged.<br> **extraParams**: additional information about the drag event. The value needs to be parsed into the JSON format. For details, see [extraParams](#extraparams).| 98 99## onDrop 100 101onDrop(event: (event: DragEvent, extraParams?: string) => void) 102 103Called when a dragged item is dropped on a valid drop target. If **event.setResult()** is not explicitly used, the default value **DRAG_SUCCESSFUL** will be used as the result. 104 105**Atomic service API**: This API can be used in atomic services since API version 11. 106 107**System capability**: SystemCapability.ArkUI.ArkUI.Full 108 109**Parameters** 110 111| Name | Type | Mandatory| Description | 112| ----------- | ------------------------------- | ---- | ------------------------------ | 113| event | (event: [DragEvent](#dragevent), extraParams?: string) => void | Yes | Callback function.<br>**NOTE**<br> **event**: information about the drag event, including the coordinates of the item that is being dragged.<br> **extraParams**: additional information about the drag event. The value needs to be parsed into the JSON format. For details, see [extraParams](#extraparams).| 114 115## onDragEnd 116 117onDragEnd(event: (event: DragEvent, extraParams?: string) => void) 118 119Triggered when the dragging of the component bound to the event ends. 120 121**Atomic service API**: This API can be used in atomic services since API version 11. 122 123**System capability**: SystemCapability.ArkUI.ArkUI.Full 124 125**Parameters** 126 127| Name | Type | Mandatory| Description | 128| ----------- | ------------------------------- | ---- | ------------------------------ | 129| event | (event: [DragEvent](#dragevent), extraParams?: string) => void | Yes | Callback function.<br>**NOTE**<br> **event**: information about the drag event, excluding the coordinates of the item that is being dragged.<br> **extraParams**: additional information about the drag event. The value needs to be parsed into the JSON format. For details, see [extraParams](#extraparams).| 130 131## onPreDrag<sup>12+</sup> 132 133onPreDrag(event: (preDragStatus: PreDragStatus) => void) 134 135Invoked when the component enters a state prior to a drop and drop operation. 136 137**Atomic service API**: This API can be used in atomic services since API version 12. 138 139**System capability**: SystemCapability.ArkUI.ArkUI.Full 140 141**Parameters** 142 143| Name | Type | Mandatory| Description | 144| ----------- | ------------------------------- | ---- | ------------------------------ | 145| callback | Callback<(preDragStatus: [PreDragStatus](#predragstatus12)> ) => void | Yes | Callback function.| 146 147## DragItemInfo 148 149**Atomic service API**: This API can be used in atomic services since API version 11. 150 151**System capability**: SystemCapability.ArkUI.ArkUI.Full 152 153| Name | Type | Mandatory | Description | 154| --------- | ---------------------------------------- | ---- | --------------------------------- | 155| pixelMap | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | No | Image to be displayed during dragging.| 156| builder | [CustomBuilder](ts-types.md#custombuilder8) | No | Custom component to display during dragging. If **pixelMap** is set, this parameter is ignored.<br> **NOTE**<br>Global builder definition is not supported. If the [\<Image>](ts-basic-components-image.md) component is used in the builder, enable synchronous loading whenever possible, that is, set the [syncLoad](ts-basic-components-image.md#syncload8) attribute of the component to **true**. The builder is used only to generate the image displayed during the current dragging. Changes to the builder, if any, apply to the next dragging, but not to the current dragging.| 157| extraInfo | string | No | Extra information of the dragged item. | 158 159 160## extraParams 161 162 Provides additional information required for dragging an item. 163 164 **extraParams** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**. 165 166| Name | Type | Description | 167| ------------- | ------ | ---------------------------------------- | 168| selectedIndex | number | Index of the dragged item in the parent container. The value of **selectedindex** starts from **0**.<br>This parameter takes effect only in the drag event of the **\<ListItem>** component.| 169| insertIndex | number | Index of the element into which the dragged item is dropped in the **List** component. The value of **insertIndex** starts from **0**.<br>This parameter takes effect only in the drag event of the **\<List>** component.| 170 171## DragEvent 172 173**System capability**: SystemCapability.ArkUI.ArkUI.Full 174 175### Attributes 176 177**Atomic service API**: This API can be used in atomic services since API version 11. 178 179**System capability**: SystemCapability.ArkUI.ArkUI.Full 180 181| Name | Type | Description | 182| ------ | ------ | ---------------- | 183| useCustomDropAnimation<sup>10+</sup> | boolean | Whether to use the custom drop animation when the dragging ends.<br>If this parameter is set to **true**, the default drop animation is disabled, and the custom one is used.<br>If this parameter is set to **false** or is not set, the default drop animation is enabled. In this case, to avoid conflicts, the application should not implement any custom drop animation.| 184|dragBehavior<sup>10+</sup> | [DragBehavior](#dragbehavior10) | Copy or paste mode.| 185 186### Methods 187 188**System capability**: SystemCapability.ArkUI.ArkUI.Full 189 190| Name | Return Value Type | Description | 191| ----------- | ------------------------------- | ------------------------------ | 192| setData(unifiedData: [UnifiedData](../../apis-arkdata/js-apis-data-unifiedDataChannel.md#unifieddata))<sup>10+</sup> | void | Sets drag-related data in the drag event.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 193| getData()<sup>10+</sup> | [UnifiedData](../../apis-arkdata/js-apis-data-unifiedDataChannel.md#unifieddata) | Obtains drag-related data from the drag event. For details about the data obtaining result, see the error code description.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 194| getSummary()<sup>10+</sup> | [Summary](../../apis-arkdata/js-apis-data-unifiedDataChannel.md#summary) | Obtains the summary of drag-related data from the drag event.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 195| setResult(dragRect: [DragResult](#dragresult10))<sup>10+</sup> | void | Sets the drag and drop result in the drag event.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 196| getResult()<sup>10+</sup> | [DragResult](#dragresult10) | Obtains the drag and drop result from the drag event.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 197| getPreviewRect()<sup>10+</sup> | [Rectangle](ts-universal-attributes-touch-target.md#rectangle) | Obtains the position of the drag preview image relative to the current window, as well as the size of the preview image, in VP units. **x** and **y** represent the coordinates of the upper left corner of the preview image, while **width** and **height** represent the size of the preview image.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 198| getVelocityX()<sup>10+</sup> | number | Obtains the dragging velocity along the x-axis. The origin of the coordinate axis is the upper left corner of the screen. The unit is vp. The velocity is positive if the movement is from left to right, and it is negative if the movement is from right to left.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 199| getVelocityY()<sup>10+</sup> | number | Obtains the dragging velocity along the y-axis. The origin of the coordinate axis is the upper left corner of the screen. The unit is vp. The velocity is positive if the movement is from top to bottom, and it is negative if the movement is from bottom to top.| 200| getVelocity()<sup>10+</sup> | number | Obtains the dragging velocity along the main axis. The value is the arithmetic square root of the sum of squares of the velocity along the x- and y-axis.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 201| getWindowX()<sup>10+</sup> | number | X coordinate of the drag position relative to the upper left corner of the window, in vp.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 202| getWindowY()<sup>10+</sup> | number | Y coordinate of the drag position relative to the upper left corner of the window, in vp.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 203| getDisplayX()<sup>10+</sup> | number | X coordinate of the drag position relative to the upper left corner of the screen, in vp.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 204| getDisplayY()<sup>10+</sup> | number | Y coordinate of the drag position relative to the upper left corner of the screen, in vp.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 205| getX()<sup>(deprecated)</sup> | number | X coordinate of the drag position relative to the upper left corner of the window, in vp.<br>This API is deprecated since API version 10. You are advised to use **getWindowX()** instead.| 206| getY()<sup>(deprecated)</sup> | number | Y coordinate of the drag position relative to the upper left corner of the window, in vp.<br>This API is deprecated since API version 10. You are advised to use **getWindowY()** instead.| 207| getModifierKeyState<sup>12+</sup> | (Array<string>) => bool | Obtains the pressed status of modifier keys. For details about the error message, see the following error codes. The following modifier keys are supported: 'Ctrl'\|'Alt'\|'Shift'\|'Fn'. This API does not work for the Fn key on an externally connected keyboard.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 208 209 210**Error codes** 211 212For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md) and [Drag Event Error Codes](../errorcode-drag-event.md). 213 214| ID | Error Message| 215| --------- | ------- | 216| 401 | Parameter error. Possible causes: 1. Incorrect parameter types. 2. Parameter verification failed. | 217| 190001 | Data not found.| 218| 190002 | Data error. | 219 220## DragResult<sup>10+</sup> 221 222**Atomic service API**: This API can be used in atomic services since API version 11. 223 224**System capability**: SystemCapability.ArkUI.ArkUI.Full 225 226| Name| Description| 227| ----- | ----------------- | 228| DRAG_SUCCESSFUL | The drag and drop operation succeeded. It can be used in **onDrop**.| 229| DRAG_FAILED | The drag and drop operation failed. It can be used in **onDrop**.| 230| DRAG_CANCELED | The drag and drop operation was canceled. It can be used in **onDrop**.| 231| DROP_ENABLED | The component allows for a drop operation. It can be used in **onDragMove**.| 232| DROP_DISABLED | The component does not allow for a drop operation. It can be used in **onDragMove**.| 233 234## DragBehavior<sup>10+</sup> 235 236Describes the drag behavior. When [DragResult](#dragresult10) is set to **DROP_ENABLED**, you can define **DragBehavior** as either **COPY** or **MOVE**. **DragBehavior** serves to inform you about the intended method of data handling – whether it's a copy or a move – but it does not actually dictate the real processing of the data. The behavior is reported back to the drag source through **onDragEnd**, enabling the initiator of the drag to discern whether the operation results in a copy or a move of the data. 237 238**Atomic service API**: This API can be used in atomic services since API version 11. 239 240**System capability**: SystemCapability.ArkUI.ArkUI.Full 241 242| Name| Description| 243| ----- | ----------------- | 244| COPY | The data is handled as a copy operation.| 245| MOVE| The data is handled as a move operation, effectively cutting it from its original location.| 246 247## PreDragStatus<sup>12+</sup> 248 249**Atomic service API**: This API can be used in atomic services since API version 12. 250 251**System capability**: SystemCapability.ArkUI.ArkUI.Full 252 253| Name| Value| Description| 254| ---- | - | ----------------- | 255| ACTION_DETECTING_STATUS | 0 | A drag gesture is being detected. (Triggered when the component is long pressed for 50 ms.)| 256| READY_TO_TRIGGER_DRAG_ACTION | 1 | The component is ready to be dragged. (Triggered when the component is long pressed for 500 ms.)| 257| PREVIEW_LIFT_STARTED | 2 | A lift animation is started. (Triggered when the component is long pressed for 800 ms.)| 258| PREVIEW_LIFT_FINISHED | 3 | A lift animation is finished. (Triggered at the completion of the lift animation.)| 259| PREVIEW_LANDING_STARTED | 4 | A drop animation is started. (Triggered when the drop animation starts.)| 260| PREVIEW_LANDING_FINISHED | 5 | A drop animation is finished. (Triggered when the drop animation ends.)| 261| ACTION_CANCELED_BEFORE_DRAG | 6 | A drop animation is terminated. (Triggered when the finger is lifted off the screen after the component enters the **READY_TO_TRIGGER_DRAG_ACTION** state.)| 262 263## Example 264 265```ts 266// xxx.ets 267import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData'; 268import { promptAction } from '@kit.ArkUI'; 269import { BusinessError } from '@kit.BasicServicesKit'; 270 271@Entry 272@Component 273struct Index { 274 @State targetImage: string = ''; 275 @State targetText: string = 'Drag Text'; 276 @State imageWidth: number = 100; 277 @State imageHeight: number = 100; 278 @State imgState: Visibility = Visibility.Visible; 279 @State videoSrc: string = 'resource://RAWFILE/02.mp4'; 280 @State abstractContent: string = "abstract"; 281 @State textContent: string = ""; 282 @State backGroundColor: Color = Color.Transparent; 283 284 @Builder 285 pixelMapBuilder() { 286 Column() { 287 Image($r('app.media.icon')) 288 .width(120) 289 .height(120) 290 .backgroundColor(Color.Yellow) 291 } 292 } 293 294 getDataFromUdmfRetry(event: DragEvent, callback: (data: DragEvent) => void) { 295 try { 296 let data: UnifiedData = event.getData(); 297 if (!data) { 298 return false; 299 } 300 let records: Array<unifiedDataChannel.UnifiedRecord> = data.getRecords(); 301 if (!records || records.length <= 0) { 302 return false; 303 } 304 callback(event); 305 return true; 306 } catch (e) { 307 console.log("getData failed, code = " + (e as BusinessError).code + ", message = " + (e as BusinessError).message); 308 return false; 309 } 310 } 311 312 getDataFromUdmf(event: DragEvent, callback: (data: DragEvent) => void) { 313 if (this.getDataFromUdmfRetry(event, callback)) { 314 return; 315 } 316 setTimeout(() => { 317 this.getDataFromUdmfRetry(event, callback); 318 }, 1500); 319 } 320 321 private PreDragChange(preDragStatus: PreDragStatus): void { 322 if (preDragStatus == PreDragStatus.READY_TO_TRIGGER_DRAG_ACTION) { 323 this.backGroundColor = Color.Red; 324 } else if (preDragStatus == PreDragStatus.ACTION_CANCELED_BEFORE_DRAG 325 || preDragStatus == PreDragStatus.PREVIEW_LANDING_FINISHED) { 326 this.backGroundColor = Color.Blue; 327 } 328 } 329 330 build() { 331 Row() { 332 Column() { 333 Text('start Drag') 334 .fontSize(18) 335 .width('100%') 336 .height(40) 337 .margin(10) 338 .backgroundColor('#008888') 339 Image($r('app.media.icon')) 340 .width(100) 341 .height(100) 342 .draggable(true) 343 .margin({ left: 15 }) 344 .visibility(this.imgState) 345 .onDragEnd((event) => { 346 // The result value obtained from onDragEnd is set in onDrop of the drop target. 347 if (event.getResult() === DragResult.DRAG_SUCCESSFUL) { 348 promptAction.showToast({ duration: 100, message: 'Drag Success' }); 349 } else if (event.getResult() === DragResult.DRAG_FAILED) { 350 promptAction.showToast({ duration: 100, message: 'Drag failed' }); 351 } 352 }) 353 Text('test drag event') 354 .width('100%') 355 .height(100) 356 .draggable(true) 357 .margin({ left: 15 }) 358 .copyOption(CopyOptions.InApp) 359 TextArea({ placeholder: 'please input words' }) 360 .copyOption(CopyOptions.InApp) 361 .width('100%') 362 .height(50) 363 .draggable(true) 364 Search({ placeholder: 'please input you word' }) 365 .searchButton('Search') 366 .width('100%') 367 .height(80) 368 .textFont({ size: 20 }) 369 Column() { 370 Text('change video source') 371 }.draggable(true) 372 .onDragStart((event) => { 373 let video: unifiedDataChannel.Video = new unifiedDataChannel.Video(); 374 video.videoUri = '/resources/rawfile/01.mp4'; 375 let data: unifiedDataChannel.UnifiedData = new unifiedDataChannel.UnifiedData(video); 376 (event as DragEvent).setData(data); 377 return { builder: () => { 378 this.pixelMapBuilder() 379 }, extraInfo: 'extra info' }; 380 }) 381 382 Column() { 383 Text('this is abstract') 384 .fontSize(20) 385 .width('100%') 386 }.margin({ left: 40, top: 20 }) 387 .width('100%') 388 .height(100) 389 .onDragStart((event) => { 390 this.backGroundColor = Color.Transparent; 391 let data: unifiedDataChannel.PlainText = new unifiedDataChannel.PlainText(); 392 data.abstract = 'this is abstract'; 393 data.textContent = 'this is content this is content'; 394 (event as DragEvent).setData(new unifiedDataChannel.UnifiedData(data)); 395 }) 396 .onPreDrag((status: PreDragStatus) => { 397 this.PreDragChange(status); 398 }) 399 .backgroundColor(this.backGroundColor) 400 }.width('45%') 401 .height('100%') 402 403 Column() { 404 Text('Drag Target Area') 405 .fontSize(20) 406 .width('100%') 407 .height(40) 408 .margin(10) 409 .backgroundColor('#008888') 410 Image(this.targetImage) 411 .width(this.imageWidth) 412 .height(this.imageHeight) 413 .draggable(true) 414 .margin({ left: 15 }) 415 .border({ color: Color.Black, width: 1 }) 416 .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE]) 417 .onDrop((dragEvent?: DragEvent) => { 418 this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => { 419 let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords(); 420 let rect: Rectangle = event.getPreviewRect(); 421 this.imageWidth = Number(rect.width); 422 this.imageHeight = Number(rect.height); 423 this.targetImage = (records[0] as unifiedDataChannel.Image).imageUri; 424 event.useCustomDropAnimation = false; 425 animateTo({ duration: 1000 }, () => { 426 this.imageWidth = 100; 427 this.imageHeight = 100; 428 this.imgState = Visibility.None; 429 }) 430 // If result is explicitly set to successful, the value is passed in to onDragEnd of the drag source. 431 event.setResult(DragResult.DRAG_SUCCESSFUL); 432 }) 433 }) 434 435 Text(this.targetText) 436 .width('100%') 437 .height(100) 438 .border({ color: Color.Black, width: 1 }) 439 .margin(15) 440 .allowDrop([uniformTypeDescriptor.UniformDataType.PLAIN_TEXT]) 441 .onDrop((dragEvent?: DragEvent) => { 442 this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => { 443 let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords(); 444 let plainText: unifiedDataChannel.PlainText = records[0] as unifiedDataChannel.PlainText; 445 this.targetText = plainText.textContent; 446 }) 447 }) 448 449 Video({ src: this.videoSrc, previewUri: $r('app.media.icon') }) 450 .width('100%') 451 .height(200) 452 .controls(true) 453 .allowDrop([uniformTypeDescriptor.UniformDataType.VIDEO]) 454 455 Column() { 456 Text(this.abstractContent).fontSize(20).width('100%') 457 Text(this.textContent).fontSize(15).width('100%') 458 } 459 .width('100%') 460 .height(100) 461 .margin(20) 462 .border({ color: Color.Black, width: 1 }) 463 .allowDrop([uniformTypeDescriptor.UniformDataType.PLAIN_TEXT]) 464 .onDrop((dragEvent?: DragEvent) => { 465 this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => { 466 let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords(); 467 let plainText: unifiedDataChannel.PlainText = records[0] as unifiedDataChannel.PlainText; 468 this.abstractContent = plainText.abstract as string; 469 this.textContent = plainText.textContent; 470 }) 471 }) 472 }.width('45%') 473 .height('100%') 474 .margin({ left: '5%' }) 475 } 476 .height('100%') 477 } 478} 479``` 480 481
