1# 拖拽事件 2 3拖拽事件指组件被长按后拖拽时触发的事件。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 应用本身预置的资源文件（即应用在安装前的HAP包中已经存在的资源文件）仅支持本地应用内拖拽。 10 11ArkUI框架对以下组件实现了默认的拖拽能力，支持对数据的拖出或拖入响应。开发者也可以通过实现通用拖拽事件来自定义拖拽响应。 12 13- 默认支持拖出能力的组件（可从组件上拖出数据）：[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)，开发者可通过设置这些组件的[draggable](ts-universal-attributes-drag-drop.md#draggable)属性来控制对默认拖拽能力的使用。 14 15- 默认支持拖入能力的组件（目标组件可响应拖入数据）：[Search](ts-basic-components-search.md)、[TextInput](ts-basic-components-textinput.md)、[TextArea](ts-basic-components-textarea.md)、[RichEditor](ts-basic-components-richeditor.md)，开发者可通过设置这些组件的[allowDrop](ts-universal-attributes-drag-drop.md#allowdrop)属性为null来禁用对默认拖入能力的支持。 16 17<!--RP1--><!--RP1End-->其他组件需要开发者将draggable属性设置为true，并在onDragStart等接口中实现数据传输相关内容，才能正确处理拖拽。 18 19> **说明：** 20> 21> Text组件需配合[copyOption](ts-basic-components-text.md#copyoption9)一起使用，设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice。 22 23## onDragStart 24 25onDragStart(event: (event: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo) 26 27第一次拖拽此事件绑定的组件时，长按时间 >= 500ms，然后手指移动距离 >= 10vp，触发回调。 28 29针对默认支持拖出能力的组件，如果开发者设置了onDragStart，优先执行开发者的onDragStart，并根据执行情况决定是否使用系统默认的拖出能力，具体为： 30- 如果开发者返回了自定义背板图，则不再使用系统默认的拖拽背板图； 31- 如果开发者设置了拖拽数据，则不再使用系统默认填充的拖拽数据。 32 33文本类组件[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)对选中的文本内容进行拖拽时，不支持背板图的自定义。当onDragStart与菜单预览一起使用或使用了默认支持拖出能力的组件时，预览及菜单项上的自定义内容不支持拖拽。 34 35**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 36 37**事件优先级：** 长按触发时间 < 500ms，长按事件优先拖拽事件响应，长按触发时间 >= 500ms，拖拽事件优先长按事件响应。 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41**参数：** 42 43| 参数名 | 类型 | 必填 | 说明 | 44| ----------- | ------------------------------- | ---- | ------------------ | 45| event | (event: [DragEvent](#dragevent), extraParams?: string) => [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo说明) | 是 | 回调函数。<br/> **说明：**<br/> event为拖拽事件信息。<br/> extraParams为拖拽事件额外信息。需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 46 47**返回值：** 48 49| 类型 | 说明 | 50| ------------------------------------------------------------ | ------------------------ | 51| [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo说明) | 拽过程中显示的组件信息。<br/>**说明：** 不支持全局builder。 | 52 53## onDragEnter 54 55onDragEnter(event: (event: DragEvent, extraParams?: string) => void) 56 57拖拽进入组件范围内时，触发回调，当监听了[onDrop](#ondrop)事件时，此事件才有效。 58 59**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63**参数：** 64 65| 参数名 | 类型 | 必填 | 说明 | 66| ----------- | ------------------------------- | ---- | ------------------------------ | 67| event | (event: [DragEvent](#dragevent), extraParams?: string) => void | 是 | 回调函数。<br/>**说明：**<br/> event为拖拽事件信息，包括拖拽点坐标。<br/> extraParams为拖拽事件额外信息，需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 68 69## onDragMove 70 71onDragMove(event: (event: DragEvent, extraParams?: string) => void) 72 73拖拽在组件范围内移动时，触发回调，当监听了[onDrop](#ondrop)事件时，此事件才有效。 74 75**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 76 77**系统能力：** SystemCapability.ArkUI.ArkUI.Full 78 79**参数：** 80 81| 参数名 | 类型 | 必填 | 说明 | 82| ----------- | ------------------------------- | ---- | ------------------------------ | 83| event | (event: [DragEvent](#dragevent), extraParams?: string) => void | 是 | 回调函数。<br/>**说明：**<br/> event为拖拽事件信息，包括拖拽点坐标。<br/> extraParams为拖拽事件额外信息，需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 84 85## onDragLeave 86 87onDragLeave(event: (event: DragEvent, extraParams?: string) => void) 88 89拖拽离开组件范围内时，触发回调，当监听了[onDrop](#ondrop)事件时，此事件才有效。 90 91**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 92 93**系统能力：** SystemCapability.ArkUI.ArkUI.Full 94 95**参数：** 96 97| 参数名 | 类型 | 必填 | 说明 | 98| ----------- | ------------------------------- | ---- | ------------------------------ | 99| event | (event: [DragEvent](#dragevent), extraParams?: string) => void | 是 | 回调函数。<br/>**说明：**<br/> event为拖拽事件信息，包括拖拽点坐标。<br/> extraParams为拖拽事件额外信息，需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 100 101## onDrop 102 103onDrop(event: (event: DragEvent, extraParams?: string) => void) 104 105绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。如果开发者没有在onDrop中主动调用event.setResult()设置拖拽接收的结果，若拖拽组件为系统支持默认拖入的组件，以系统实际处理数据结果为准，其它组件则系统按照数据接收成功处理。 106 107**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 108 109**系统能力：** SystemCapability.ArkUI.ArkUI.Full 110 111**参数：** 112 113| 参数名 | 类型 | 必填 | 说明 | 114| ----------- | ------------------------------- | ---- | ------------------------------ | 115| event | (event: [DragEvent](#dragevent), extraParams?: string) => void | 是 | 回调函数。<br/>**说明：**<br/> event为拖拽事件信息，包括拖拽点坐标。<br/> extraParams为拖拽事件额外信息，需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 116 117## onDragEnd 118 119onDragEnd(event: (event: DragEvent, extraParams?: string) => void) 120 121绑定此事件的组件触发的拖拽结束后，触发回调。 122 123**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 124 125**系统能力：** SystemCapability.ArkUI.ArkUI.Full 126 127**参数：** 128 129| 参数名 | 类型 | 必填 | 说明 | 130| ----------- | ------------------------------- | ---- | ------------------------------ | 131| event | (event: [DragEvent](#dragevent), extraParams?: string) => void | 是 | 回调函数。<br/>**说明：**<br/> event为拖拽事件信息，不包括拖拽点坐标。<br/> extraParams为拖拽事件额外信息，需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 132 133## onPreDrag<sup>12+</sup> 134 135onPreDrag(event: (preDragStatus: PreDragStatus) => void) 136 137绑定此事件的组件，当触发拖拽发起前的不同阶段时，触发回调。 138 139**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 140 141**系统能力：** SystemCapability.ArkUI.ArkUI.Full 142 143**参数：** 144 145| 参数名 | 类型 | 必填 | 说明 | 146| ----------- | ------------------------------- | ---- | ------------------------------ | 147| callback | Callback<(preDragStatus: [PreDragStatus](#predragstatus12枚举说明)> ) => void | 是 | 回调函数。| 148 149## DragItemInfo说明 150 151**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 152 153**系统能力：** SystemCapability.ArkUI.ArkUI.Full 154 155| 名称 | 类型 | 必填 | 描述 | 156| --------- | ---------------------------------------- | ---- | --------------------------------- | 157| pixelMap | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 否 | 设置拖拽过程中显示的图片。 | 158| builder | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 拖拽过程中显示自定义组件，如果设置了pixelMap，则忽略此值。<br /> **说明：** <br/>不支持全局builder。如果builder中使用了[Image](ts-basic-components-image.md)组件，应尽量开启同步加载，即配置Image的[syncLoad](ts-basic-components-image.md#syncload8)为true。该builder只用于生成当次拖拽中显示的图片，builder的修改不会同步到当前正在拖拽的图片，对builder的修改需要在下一次拖拽时生效。| 159| extraInfo | string | 否 | 拖拽项的描述。 | 160 161 162## extraParams说明 163 164 用于返回组件在拖拽中需要用到的额外信息。 165 166 extraParams是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。 167 168| 名称 | 类型 | 描述 | 169| ------------- | ------ | ---------------------------------------- | 170| selectedIndex | number | 当拖拽事件设在父容器的子元素时，selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素，selectedIndex从0开始。<br/>仅在ListItem组件的拖拽事件中生效。 | 171| insertIndex | number | 当前拖拽元素在List组件中放下时，insertIndex表示被拖拽元素插入该组件的第insertIndex个位置，insertIndex从0开始。<br/>仅在List组件的拖拽事件中生效。 | 172 173## DragEvent 174 175**系统能力：** SystemCapability.ArkUI.ArkUI.Full 176 177### 属性 178 179**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 180 181**系统能力：** SystemCapability.ArkUI.ArkUI.Full 182 183| 名称 | 类型 | 描述 | 184| ------ | ------ | ---------------- | 185| useCustomDropAnimation<sup>10+</sup> | boolean | 当拖拽结束时，是否使能并使用系统默认落位动效。<br/>应用可将该值设定为true来禁用系统默认落位动效，并实现自己的自定义落位动效。<br/>当不配置或设置为false时，系统默认落位动效生效，当松手位置的控件可接收拖拽的数据时，落位为缩小消失动效，若不可接收数据，则为放大消失动效。<br/>当未禁用系统默认落位动效情况下，应用不应再实现自定义动效，以避免动效上的冲突。| 186|dragBehavior<sup>10+</sup> | [DragBehavior](#dragbehavior10) | 切换复制和剪贴模式的角标显示状态。 | 187 188### 方法 189 190**系统能力：** SystemCapability.ArkUI.ArkUI.Full 191 192| 名称 | 返回值类型 | 描述 | 193| ----------- | ------------------------------- | ------------------------------ | 194| setData(unifiedData: [UnifiedData](../../apis-arkdata/js-apis-data-unifiedDataChannel.md#unifieddata))<sup>10+</sup> | void | 向DragEvent中设置拖拽相关数据。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 195| getData()<sup>10+</sup> | [UnifiedData](../../apis-arkdata/js-apis-data-unifiedDataChannel.md#unifieddata) | 从DragEvent中获取拖拽相关数据。数据获取结果请参考错误码说明。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 196| getSummary()<sup>10+</sup> | [Summary](../../apis-arkdata/js-apis-data-unifiedDataChannel.md#summary) | 从DragEvent中获取拖拽相关数据的简介。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 197| setResult(dragRect: [DragResult](#dragresult10枚举说明))<sup>10+</sup> | void | 向DragEvent中设置拖拽结果。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 198| getResult()<sup>10+</sup> | [DragResult](#dragresult10枚举说明) | 从DragEvent中获取拖拽结果。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 199| getPreviewRect()<sup>10+</sup> | [Rectangle](ts-universal-attributes-touch-target.md#rectangle对象说明) | 获取拖拽跟手图相对于当前窗口的位置，以及跟手图尺寸信息，单位VP，其中x和y代表跟手图左上角的窗口坐标，width和height代表跟手图的尺寸。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 200| getVelocityX()<sup>10+</sup> | number | 获取当前拖拽的x轴方向拖动速度。坐标轴原点为屏幕左上角，单位为vp，分正负方向速度，从左往右为正，反之为负。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 201| getVelocityY()<sup>10+</sup> | number | 获取当前拖拽的y轴方向拖动速度。坐标轴原点为屏幕左上角，单位为vp，分正负方向速度，从上往下为正，反之为负。 | 202| getVelocity()<sup>10+</sup> | number | 获取当前拖拽的主方向拖动速度。为xy轴方向速度的平方和的算术平方根。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 203| getWindowX()<sup>10+</sup> | number | 当前拖拽点相对于窗口左上角的x轴坐标，单位为vp。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 204| getWindowY()<sup>10+</sup> | number | 当前拖拽点相对于窗口左上角的y轴坐标，单位为vp。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 205| getDisplayX()<sup>10+</sup> | number | 当前拖拽点相对于屏幕左上角的x轴坐标，单位为vp。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 206| getDisplayY()<sup>10+</sup> | number | 当前拖拽点相对于屏幕左上角的y轴坐标，单位为vp。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 207| getX()<sup>(deprecated)</sup> | number | 当前拖拽点相对于窗口左上角的x轴坐标，单位为vp。<br>从API Version 10开始不再维护，建议使用getWindowX()代替。 | 208| getY()<sup>(deprecated)</sup> | number | 当前拖拽点相对于窗口左上角的y轴坐标，单位为vp。<br>从API Version 10开始不再维护，建议使用getWindowY()代替。 | 209| getModifierKeyState<sup>12+</sup> | (Array<string>) => bool | 获取功能键按压状态。报错信息请参考以下错误码。支持功能键 'Ctrl'\|'Alt'\|'Shift'\|'Fn'，设备外接带Fn键的键盘不支持Fn键查询。 <br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。| 210 211 212**错误码：** 213 214以下错误码的详细介绍请参见[通用错误码](../../errorcode-universal.md)和[drag-event(拖拽事件)](../errorcode-drag-event.md)错误码。 215 216| 错误码ID | 错误信息 | 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**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 225 226**系统能力：** SystemCapability.ArkUI.ArkUI.Full 227 228| 名称 | 描述 | 229| ----- | ----------------- | 230| DRAG_SUCCESSFUL | 拖拽成功，在onDrop中使用。 | 231| DRAG_FAILED | 拖拽失败，在onDrop中使用。 | 232| DRAG_CANCELED | 拖拽取消，在onDrop中使用。 | 233| DROP_ENABLED | 组件允许落入，在onDragMove中使用。 | 234| DROP_DISABLED | 组件不允许落入，在onDragMove中使用。 | 235 236## DragBehavior<sup>10+</sup> 237 238当设置[DragResult](#dragresult10枚举说明)为DROP_ENABLED后，可设置DragBehavior为复制（copy）或剪切（move）。DragBehavior用来向开发者描述数据的处理方式是复制（copy）还是剪切（move），但无法最终决定对数据的实际处理方式。DragBehavior会通过onDragEnd带回给数据拖出方，发起拖拽的一方可通过DragBehavior来区分做出的是复制还是剪切数据的不同行为。 239 240**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 241 242**系统能力：** SystemCapability.ArkUI.ArkUI.Full 243 244| 名称 | 描述 | 245| ----- | ----------------- | 246| COPY | 指定对数据的处理方式为复制。| 247| MOVE| 指定对数据的处理方式为剪切。| 248 249## PreDragStatus<sup>12+</sup>枚举说明 250 251**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 252 253**系统能力：** SystemCapability.ArkUI.ArkUI.Full 254 255| 名称 | 值 | 描述 | 256| ---- | - | ----------------- | 257| ACTION_DETECTING_STATUS | 0 | 拖拽手势启动阶段。(按下50ms时触发) | 258| READY_TO_TRIGGER_DRAG_ACTION | 1 | 拖拽准备完成，可发起拖拽阶段。(按下500ms时触发) | 259| PREVIEW_LIFT_STARTED | 2 | 拖拽浮起动效发起阶段。(按下800ms时触发) | 260| PREVIEW_LIFT_FINISHED | 3 | 拖拽浮起动效结束阶段。(浮起动效完全结束时触发) | 261| PREVIEW_LANDING_STARTED | 4 | 拖拽落回动效发起阶段。(落回动效发起时触发) | 262| PREVIEW_LANDING_FINISHED | 5 | 拖拽落回动效结束阶段。(落回动效结束时触发) | 263| ACTION_CANCELED_BEFORE_DRAG | 6 | 拖拽浮起落位动效中断。(已满足READY_TO_TRIGGER_DRAG_ACTION状态后，未达到动效阶段，手指抬手时触发) | 264 265## 示例 266 267该示例展示了部分组件（如Image和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 abstractContent: string = "abstract"; 284 @State textContent: string = ""; 285 @State backGroundColor: Color = Color.Transparent; 286 287 @Builder 288 pixelMapBuilder() { 289 Column() { 290 Image($r('app.media.icon')) 291 .width(120) 292 .height(120) 293 .backgroundColor(Color.Yellow) 294 } 295 } 296 297 getDataFromUdmfRetry(event: DragEvent, callback: (data: DragEvent) => void) { 298 try { 299 let data: UnifiedData = event.getData(); 300 if (!data) { 301 return false; 302 } 303 let records: Array<unifiedDataChannel.UnifiedRecord> = data.getRecords(); 304 if (!records || records.length <= 0) { 305 return false; 306 } 307 callback(event); 308 return true; 309 } catch (e) { 310 console.log("getData failed, code = " + (e as BusinessError).code + ", message = " + (e as BusinessError).message); 311 return false; 312 } 313 } 314 315 getDataFromUdmf(event: DragEvent, callback: (data: DragEvent) => void) { 316 if (this.getDataFromUdmfRetry(event, callback)) { 317 return; 318 } 319 setTimeout(() => { 320 this.getDataFromUdmfRetry(event, callback); 321 }, 1500); 322 } 323 324 private PreDragChange(preDragStatus: PreDragStatus): void { 325 if (preDragStatus == PreDragStatus.READY_TO_TRIGGER_DRAG_ACTION) { 326 this.backGroundColor = Color.Red; 327 } else if (preDragStatus == PreDragStatus.ACTION_CANCELED_BEFORE_DRAG 328 || preDragStatus == PreDragStatus.PREVIEW_LANDING_FINISHED) { 329 this.backGroundColor = Color.Blue; 330 } 331 } 332 333 build() { 334 Row() { 335 Column() { 336 Text('start Drag') 337 .fontSize(18) 338 .width('100%') 339 .height(40) 340 .margin(10) 341 .backgroundColor('#008888') 342 Image($r('app.media.icon')) 343 .width(100) 344 .height(100) 345 .draggable(true) 346 .margin({ left: 15 }) 347 .visibility(this.imgState) 348 .onDragEnd((event) => { 349 // onDragEnd里取到的result值在接收方onDrop设置 350 if (event.getResult() === DragResult.DRAG_SUCCESSFUL) { 351 promptAction.showToast({ duration: 100, message: 'Drag Success' }); 352 } else if (event.getResult() === DragResult.DRAG_FAILED) { 353 promptAction.showToast({ duration: 100, message: 'Drag failed' }); 354 } 355 }) 356 Text('test drag event') 357 .width('100%') 358 .height(100) 359 .draggable(true) 360 .margin({ left: 15 }) 361 .copyOption(CopyOptions.InApp) 362 TextArea({ placeholder: 'please input words' }) 363 .copyOption(CopyOptions.InApp) 364 .width('100%') 365 .height(50) 366 .draggable(true) 367 Search({ placeholder: 'please input you word' }) 368 .searchButton('Search') 369 .width('100%') 370 .height(80) 371 .textFont({ size: 20 }) 372 373 Column() { 374 Text('this is abstract') 375 .fontSize(20) 376 .width('100%') 377 }.margin({ left: 40, top: 20 }) 378 .width('100%') 379 .height(100) 380 .onDragStart((event) => { 381 this.backGroundColor = Color.Transparent; 382 let data: unifiedDataChannel.PlainText = new unifiedDataChannel.PlainText(); 383 data.abstract = 'this is abstract'; 384 data.textContent = 'this is content this is content'; 385 (event as DragEvent).setData(new unifiedDataChannel.UnifiedData(data)); 386 }) 387 .onPreDrag((status: PreDragStatus) => { 388 this.PreDragChange(status); 389 }) 390 .backgroundColor(this.backGroundColor) 391 }.width('45%') 392 .height('100%') 393 394 Column() { 395 Text('Drag Target Area') 396 .fontSize(20) 397 .width('100%') 398 .height(40) 399 .margin(10) 400 .backgroundColor('#008888') 401 Image(this.targetImage) 402 .width(this.imageWidth) 403 .height(this.imageHeight) 404 .draggable(true) 405 .margin({ left: 15 }) 406 .border({ color: Color.Black, width: 1 }) 407 .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE]) 408 .onDrop((dragEvent?: DragEvent) => { 409 this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => { 410 let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords(); 411 let rect: Rectangle = event.getPreviewRect(); 412 this.imageWidth = Number(rect.width); 413 this.imageHeight = Number(rect.height); 414 this.targetImage = (records[0] as unifiedDataChannel.Image).imageUri; 415 event.useCustomDropAnimation = false; 416 this.imgState = Visibility.None; 417 // 显式设置result为successful，则将该值传递给拖出方的onDragEnd 418 event.setResult(DragResult.DRAG_SUCCESSFUL); 419 }) 420 }) 421 422 Text(this.targetText) 423 .width('100%') 424 .height(100) 425 .border({ color: Color.Black, width: 1 }) 426 .margin(15) 427 .allowDrop([uniformTypeDescriptor.UniformDataType.PLAIN_TEXT]) 428 .onDrop((dragEvent?: DragEvent) => { 429 this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => { 430 let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords(); 431 let plainText: unifiedDataChannel.PlainText = records[0] as unifiedDataChannel.PlainText; 432 this.targetText = plainText.textContent; 433 }) 434 }) 435 436 Column() { 437 Text(this.abstractContent).fontSize(20).width('100%') 438 Text(this.textContent).fontSize(15).width('100%') 439 } 440 .width('100%') 441 .height(100) 442 .margin(20) 443 .border({ color: Color.Black, width: 1 }) 444 .allowDrop([uniformTypeDescriptor.UniformDataType.PLAIN_TEXT]) 445 .onDrop((dragEvent?: DragEvent) => { 446 this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => { 447 let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords(); 448 let plainText: unifiedDataChannel.PlainText = records[0] as unifiedDataChannel.PlainText; 449 this.abstractContent = plainText.abstract as string; 450 this.textContent = plainText.textContent; 451 }) 452 }) 453 }.width('45%') 454 .height('100%') 455 .margin({ left: '5%' }) 456 } 457 .height('100%') 458 } 459} 460``` 461 462
