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 provides default drag and drop capabilities for the following components, allowing them to serve as the drag source (from which data can be dragged) or drop target (to which data can be dropped). You can further customize drag and drop behavior by implementing universal drag events.
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). You can control the default drag behavior by setting the [draggable](ts-universal-attributes-drag-drop.md#draggable) attribute.
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), [RichEditor](ts-basic-components-richeditor.md). You can disable the default drag behavior by setting the [allowDrop](ts-universal-attributes-drag-drop.md#allowdrop) attribute to **null**.
16
17<!--RP1--><!--RP1End-->To 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**.
18
19> **NOTE**
20>
21> When using the **Text** component, set [copyOption](ts-basic-components-text.md#copyoption9) to **CopyOptions.InApp** or **CopyOptions.LocalDevice**.
22
23## onDragStart
24
25onDragStart(event: (event: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo)
26
27Triggered 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.
28
29For components that can serve as the drag source by default, a custom **onDragStart** event, if set, is executed and:
30- If a custom drag preview is returned, it is used in place of the default drag preview.
31- If drag data is set, it is used in place of the default drag data.
32
33No 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) When **onDragStart** is used together with menu preview or any component that can serve as the drag source by default is used, custom content on menu items and the preview cannot be dragged.
34
35**Atomic service API**: This API can be used in atomic services since API version 11.
36
37**Event priority**:<br>Long press time < 500 ms: Long press event > Drag event<br>Other cases: Drag event > Long press event
38
39**System capability**: SystemCapability.ArkUI.ArkUI.Full
40
41**Parameters**
42
43| Name     | Type                           | Mandatory| Description              |
44| ----------- | ------------------------------- | ---- | ------------------ |
45| 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).|
46
47**Return value**
48
49| Type                                                        | Description                    |
50| ------------------------------------------------------------ | ------------------------ |
51| [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo) | Component information displayed during dragging.<br>**NOTE**<br>The global builder is not supported.|
52
53## onDragEnter
54
55onDragEnter(event: (event: DragEvent, extraParams?: string) => void)
56
57Triggered when a dragged item enters a valid drop target. This event takes effect only when a listener for the [onDrop](#ondrop) event is enabled.
58
59**Atomic service API**: This API can be used in atomic services since API version 11.
60
61**System capability**: SystemCapability.ArkUI.ArkUI.Full
62
63**Parameters**
64
65| Name     | Type                           | Mandatory| Description                          |
66| ----------- | ------------------------------- | ---- | ------------------------------ |
67| 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).|
68
69## onDragMove
70
71onDragMove(event: (event: DragEvent, extraParams?: string) => void)
72
73Triggered 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.
74
75**Atomic service API**: This API can be used in atomic services since API version 11.
76
77**System capability**: SystemCapability.ArkUI.ArkUI.Full
78
79**Parameters**
80
81| Name     | Type                           | Mandatory| Description                          |
82| ----------- | ------------------------------- | ---- | ------------------------------ |
83| 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).|
84
85## onDragLeave
86
87onDragLeave(event: (event: DragEvent, extraParams?: string) => void)
88
89Triggered when a dragged item leaves a valid drop target. This event takes effect only when a listener for the [onDrop](#ondrop) event is enabled.
90
91**Atomic service API**: This API can be used in atomic services since API version 11.
92
93**System capability**: SystemCapability.ArkUI.ArkUI.Full
94
95**Parameters**
96
97| Name     | Type                           | Mandatory| Description                          |
98| ----------- | ------------------------------- | ---- | ------------------------------ |
99| 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).|
100
101## onDrop
102
103onDrop(event: (event: DragEvent, extraParams?: string) => void)
104
105Triggered when a dragged item is dropped on a valid drop target. If you do not explicitly call **event.setResult()** in **onDrop** to set the result of the drag reception, the system handles it as follows:<br>- If the component being dragged is one that supports drop actions by default, the system's actual data processing result is used.<br>- For other components, the system assumes that the data is received successfully.
106
107**Atomic service API**: This API can be used in atomic services since API version 11.
108
109**System capability**: SystemCapability.ArkUI.ArkUI.Full
110
111**Parameters**
112
113| Name     | Type                           | Mandatory| Description                          |
114| ----------- | ------------------------------- | ---- | ------------------------------ |
115| 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).|
116
117## onDragEnd
118
119onDragEnd(event: (event: DragEvent, extraParams?: string) => void)
120
121Triggered when the dragging of the component bound to the event ends.
122
123**Atomic service API**: This API can be used in atomic services since API version 11.
124
125**System capability**: SystemCapability.ArkUI.ArkUI.Full
126
127**Parameters**
128
129| Name     | Type                           | Mandatory| Description                          |
130| ----------- | ------------------------------- | ---- | ------------------------------ |
131| 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).|
132
133## onPreDrag<sup>12+</sup>
134
135onPreDrag(event: (preDragStatus: PreDragStatus) => void)
136
137Invoked when the component enters a state prior to a drop and drop operation.
138
139**Atomic service API**: This API can be used in atomic services since API version 12.
140
141**System capability**: SystemCapability.ArkUI.ArkUI.Full
142
143**Parameters**
144
145| Name     | Type                           | Mandatory| Description                          |
146| ----------- | ------------------------------- | ---- | ------------------------------ |
147| callback    | Callback<(preDragStatus: [PreDragStatus](#predragstatus12)> ) => void     | Yes  | Callback function.|
148
149## DragItemInfo
150
151**Atomic service API**: This API can be used in atomic services since API version 11.
152
153**System capability**: SystemCapability.ArkUI.ArkUI.Full
154
155| Name     | Type                                    | Mandatory  | Description                               |
156| --------- | ---------------------------------------- | ---- | --------------------------------- |
157| pixelMap  | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | No   | Image to be displayed during dragging.|
158| 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.|
159| extraInfo | string                                   | No   | Extra information of the dragged item.                          |
160
161
162## extraParams
163
164  Provides additional information required for dragging an item.
165
166  **extraParams** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**.
167
168| Name         | Type  | Description                                      |
169| ------------- | ------ | ---------------------------------------- |
170| 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.|
171| 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.|
172
173## DragEvent
174
175**System capability**: SystemCapability.ArkUI.ArkUI.Full
176
177### Attributes
178
179**Atomic service API**: This API can be used in atomic services since API version 11.
180
181**System capability**: SystemCapability.ArkUI.ArkUI.Full
182
183| Name    | Type | Description            |
184| ------ | ------ | ---------------- |
185| 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. If the drop target can accept data, it will show a shrinking disappearance animation; if not, it will show an enlarging disappearance animation.<br>When the default drop animation is not disabled, avoid implementing custom animations to prevent conflicts.|
186|dragBehavior<sup>10+</sup> | [DragBehavior](#dragbehavior10) | Copy or paste mode.|
187
188### Methods
189
190**System capability**: SystemCapability.ArkUI.ArkUI.Full
191
192| Name    | Return Value Type                           | Description                          |
193| ----------- | ------------------------------- | ------------------------------ |
194| 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.|
195| 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.|
196| 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.|
197| 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.|
198| 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.|
199| 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.|
200| 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.|
201| 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.|
202| 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.|
203| 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.|
204| 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.|
205| 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.|
206| 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.|
207| 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.|
208| 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.|
209| getModifierKeyState<sup>12+</sup> | (Array&lt;string&gt;) => 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 13.|
210
211
212**Error codes**
213
214For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md) and [Drag Event Error Codes](../errorcode-drag-event.md).
215
216| ID  | Error Message|
217| --------- | ------- |
218| 401       | Parameter error. Possible causes: 1. Incorrect parameter types. 2. Parameter verification failed. |
219| 190001    | Data not found.|
220| 190002    | Data error. |
221
222## DragResult<sup>10+</sup>
223
224**Atomic service API**: This API can be used in atomic services since API version 11.
225
226**System capability**: SystemCapability.ArkUI.ArkUI.Full
227
228| Name| Description|
229| ----- | ----------------- |
230| DRAG_SUCCESSFUL | The drag and drop operation succeeded. It can be used in **onDrop**.|
231| DRAG_FAILED | The drag and drop operation failed. It can be used in **onDrop**.|
232| DRAG_CANCELED | The drag and drop operation was canceled. It can be used in **onDrop**.|
233| DROP_ENABLED | The component allows for a drop operation. It can be used in **onDragMove**.|
234| DROP_DISABLED | The component does not allow for a drop operation. It can be used in **onDragMove**.|
235
236## DragBehavior<sup>10+</sup>
237
238Describes 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.
239
240**Atomic service API**: This API can be used in atomic services since API version 11.
241
242**System capability**: SystemCapability.ArkUI.ArkUI.Full
243
244| Name| Description|
245| ----- | ----------------- |
246| COPY | The data is handled as a copy operation.|
247| MOVE| The data is handled as a move operation, effectively cutting it from its original location.|
248
249## PreDragStatus<sup>12+</sup>
250
251**Atomic service API**: This API can be used in atomic services since API version 12.
252
253**System capability**: SystemCapability.ArkUI.ArkUI.Full
254
255| Name| Value| Description|
256| ---- | - | ----------------- |
257| ACTION_DETECTING_STATUS | 0 | A drag gesture is being detected. (Triggered when the component is long pressed for 50 ms.)|
258| READY_TO_TRIGGER_DRAG_ACTION | 1 | The component is ready to be dragged. (Triggered when the component is long pressed for 500 ms.)|
259| PREVIEW_LIFT_STARTED | 2 | A lift animation is started. (Triggered when the component is long pressed for 800 ms.)|
260| PREVIEW_LIFT_FINISHED | 3 | A lift animation is finished. (Triggered at the completion of the lift animation.)|
261| PREVIEW_LANDING_STARTED | 4 | A drop animation is started. (Triggered when the drop animation starts.)|
262| PREVIEW_LANDING_FINISHED | 5 | A drop animation is finished. (Triggered when the drop animation ends.)|
263| 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.)|
264
265## Example
266
267This example demonstrates the setup for draggable and droppable areas for certain components, such as **Image** and **Text**.
268
269```ts
270// xxx.ets
271import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData';
272import { promptAction } from '@kit.ArkUI';
273import { BusinessError } from '@kit.BasicServicesKit';
274
275@Entry
276@Component
277struct Index {
278  @State targetImage: string = '';
279  @State targetText: string = 'Drag Text';
280  @State imageWidth: number = 100;
281  @State imageHeight: number = 100;
282  @State imgState: Visibility = Visibility.Visible;
283  @State videoSrc: string = 'resource://RAWFILE/02.mp4';
284  @State abstractContent: string = "abstract";
285  @State textContent: string = "";
286  @State backGroundColor: Color = Color.Transparent;
287
288  @Builder
289  pixelMapBuilder() {
290    Column() {
291      Image($r('app.media.icon'))
292        .width(120)
293        .height(120)
294        .backgroundColor(Color.Yellow)
295    }
296  }
297
298  getDataFromUdmfRetry(event: DragEvent, callback: (data: DragEvent) => void) {
299    try {
300      let data: UnifiedData = event.getData();
301      if (!data) {
302        return false;
303      }
304      let records: Array<unifiedDataChannel.UnifiedRecord> = data.getRecords();
305      if (!records || records.length <= 0) {
306        return false;
307      }
308      callback(event);
309      return true;
310    } catch (e) {
311      console.log("getData failed, code = " + (e as BusinessError).code + ", message = " + (e as BusinessError).message);
312      return false;
313    }
314  }
315
316  getDataFromUdmf(event: DragEvent, callback: (data: DragEvent) => void) {
317    if (this.getDataFromUdmfRetry(event, callback)) {
318      return;
319    }
320    setTimeout(() => {
321      this.getDataFromUdmfRetry(event, callback);
322    }, 1500);
323  }
324
325  private PreDragChange(preDragStatus: PreDragStatus): void {
326    if (preDragStatus == PreDragStatus.READY_TO_TRIGGER_DRAG_ACTION) {
327      this.backGroundColor = Color.Red;
328    } else if (preDragStatus == PreDragStatus.ACTION_CANCELED_BEFORE_DRAG
329      || preDragStatus == PreDragStatus.PREVIEW_LANDING_FINISHED) {
330      this.backGroundColor = Color.Blue;
331    }
332  }
333
334  build() {
335    Row() {
336      Column() {
337        Text('start Drag')
338          .fontSize(18)
339          .width('100%')
340          .height(40)
341          .margin(10)
342          .backgroundColor('#008888')
343        Image($r('app.media.icon'))
344          .width(100)
345          .height(100)
346          .draggable(true)
347          .margin({ left: 15 })
348          .visibility(this.imgState)
349          .onDragEnd((event) => {
350            // The result value obtained from onDragEnd is set in onDrop of the drop target.
351            if (event.getResult() === DragResult.DRAG_SUCCESSFUL) {
352              promptAction.showToast({ duration: 100, message: 'Drag Success' });
353            } else if (event.getResult() === DragResult.DRAG_FAILED) {
354              promptAction.showToast({ duration: 100, message: 'Drag failed' });
355            }
356          })
357        Text('test drag event')
358          .width('100%')
359          .height(100)
360          .draggable(true)
361          .margin({ left: 15 })
362          .copyOption(CopyOptions.InApp)
363        TextArea({ placeholder: 'please input words' })
364          .copyOption(CopyOptions.InApp)
365          .width('100%')
366          .height(50)
367          .draggable(true)
368        Search({ placeholder: 'please input you word' })
369          .searchButton('Search')
370          .width('100%')
371          .height(80)
372          .textFont({ size: 20 })
373        Column() {
374          Text('change video source')
375        }.draggable(true)
376        .onDragStart((event) => {
377          let video: unifiedDataChannel.Video = new unifiedDataChannel.Video();
378          video.videoUri = '/resources/rawfile/01.mp4';
379          let data: unifiedDataChannel.UnifiedData = new unifiedDataChannel.UnifiedData(video);
380          (event as DragEvent).setData(data);
381          return { builder: () => {
382            this.pixelMapBuilder()
383          }, extraInfo: 'extra info' };
384        })
385
386        Column() {
387          Text('this is abstract')
388            .fontSize(20)
389            .width('100%')
390        }.margin({ left: 40, top: 20 })
391        .width('100%')
392        .height(100)
393        .onDragStart((event) => {
394          this.backGroundColor = Color.Transparent;
395          let data: unifiedDataChannel.PlainText = new unifiedDataChannel.PlainText();
396          data.abstract = 'this is abstract';
397          data.textContent = 'this is content this is content';
398          (event as DragEvent).setData(new unifiedDataChannel.UnifiedData(data));
399        })
400        .onPreDrag((status: PreDragStatus) => {
401          this.PreDragChange(status);
402        })
403        .backgroundColor(this.backGroundColor)
404      }.width('45%')
405      .height('100%')
406
407      Column() {
408        Text('Drag Target Area')
409          .fontSize(20)
410          .width('100%')
411          .height(40)
412          .margin(10)
413          .backgroundColor('#008888')
414        Image(this.targetImage)
415          .width(this.imageWidth)
416          .height(this.imageHeight)
417          .draggable(true)
418          .margin({ left: 15 })
419          .border({ color: Color.Black, width: 1 })
420          .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE])
421          .onDrop((dragEvent?: DragEvent) => {
422            this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => {
423              let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords();
424              let rect: Rectangle = event.getPreviewRect();
425              this.imageWidth = Number(rect.width);
426              this.imageHeight = Number(rect.height);
427              this.targetImage = (records[0] as unifiedDataChannel.Image).imageUri;
428              event.useCustomDropAnimation = false;
429              this.imgState = Visibility.None;
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![events-drag-drop](figures/events-drag-drop.png)
481