1# 拖拽事件 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @jiangtao92--> 5<!--Designer: @piggyguy--> 6<!--Tester: @songyanhong--> 7<!--Adviser: @HelloCrease--> 8 9拖拽事件是指在用户界面中，当用户拖动某个对象（如文件、控件或元素）时触发的一系列事件。这些事件允许开发者自定义拖拽行为，实现诸如拖放、调整位置等功能。 10 11> **说明：** 12> 13> 从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> 应用本身预置的资源文件（即应用在安装前的HAP包中已经存在的资源文件）仅支持本地应用内拖拽。 16 17ArkUI框架对以下组件实现了默认的拖拽能力，支持对数据的拖出或拖入响应。开发者也可以通过实现通用拖拽事件来自定义拖拽能力。 18 19- 默认支持拖出能力的组件（可从组件上拖出数据）：[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)、[Hyperlink](ts-container-hyperlink.md)，开发者可通过设置这些组件的[draggable](ts-universal-attributes-drag-drop.md#draggable)属性来控制对默认拖拽能力的使用。 20 21- 默认支持拖入能力的组件（目标组件可响应拖入数据）：[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来禁用对默认拖入能力的支持。 22 23其他组件需要开发者将[draggable](ts-universal-attributes-drag-drop.md#draggable)属性设置为true，并在[onDragStart](ts-universal-events-drag-drop.md#ondragstart)等接口中实现数据传输相关内容，才能正确处理拖拽能力。 24<!--RP1--><!--RP1End--> 25 26> **说明：** 27> 28> Text组件需配合[copyOption](ts-basic-components-text.md#copyoption9)一起使用，设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice。 29 30## onDragStart 31 32onDragStart(event: (event: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo): T 33 34第一次拖拽此事件绑定的组件时，长按时间 >= 500ms，然后手指移动距离 >= 10vp，触发回调。 35 36针对默认支持拖拽能力的组件，如果开发者设置了onDragStart，优先执行onDragStart，并根据执行情况决定是否使用系统默认的拖拽能力，具体规则为： 37- 如果开发者返回了自定义预览图，则不再使用系统默认的拖拽预览图； 38- 如果开发者设置了拖拽数据，则不再使用系统默认填充的拖拽数据。 39 40文本类组件[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与菜单预览一起使用或使用了默认支持拖拽能力的组件时，预览及菜单项上的自定义内容不支持拖拽。 41 42**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 43 44**事件优先级：** 长按事件触发时间 < 500ms，长按事件优先拖拽事件响应，长按事件触发时间 >= 500ms，拖拽事件优先长按事件响应。 45 46**系统能力：** SystemCapability.ArkUI.ArkUI.Full 47 48**参数：** 49 50| 参数名 | 类型 | 必填 | 说明 | 51| ----------- | ------------------------------- | ---- | ------------------ | 52| event | (event: [DragEvent](#dragevent7), extraParams?: string) => [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo) | 是 | 回调函数。<br/> **说明：**<br/> event参数为拖拽事件的信息。<br/> extraParams参数为拖拽事件的额外信息，需要解析为JSON格式，参考[extraParams](#extraparams说明)说明。<br/> CustomBuilder为拖拽过程中显示的组件信息，不支持全局builder。| 53 54**返回值：** 55 56| 类型 | 说明 | 57| -------- | -------- | 58| T | 返回当前组件。 | 59 60## onDragEnter 61 62onDragEnter(event: (event: DragEvent, extraParams?: string) => void): T 63 64拖拽进入组件范围内时，触发回调，当监听了[onDrop](#ondrop)事件时，此事件才有效。 65 66**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 67 68**系统能力：** SystemCapability.ArkUI.ArkUI.Full 69 70**参数：** 71 72| 参数名 | 类型 | 必填 | 说明 | 73| ----------- | ------------------------------- | ---- | ------------------------------ | 74| event | (event: [DragEvent](#dragevent7), extraParams?: string) => void | 是 | 回调函数。<br/>**说明：**<br/> event为拖拽事件信息，包括拖拽点坐标。<br/> extraParams为拖拽事件额外信息，需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 75 76**返回值：** 77 78| 类型 | 说明 | 79| -------- | -------- | 80| T | 返回当前组件。 | 81 82## onDragMove 83 84onDragMove(event: (event: DragEvent, extraParams?: string) => void): T 85 86拖拽在组件范围内移动时，触发回调，当监听了[onDrop](#ondrop)事件时，此事件才有效。 87 88**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92**参数：** 93 94| 参数名 | 类型 | 必填 | 说明 | 95| ----------- | ------------------------------- | ---- | ------------------------------ | 96| event | (event: [DragEvent](#dragevent7), extraParams?: string) => void | 是 | 回调函数。<br/>**说明：**<br/> event为拖拽事件信息，包括拖拽点坐标。<br/> extraParams为拖拽事件额外信息，需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 97 98**返回值：** 99 100| 类型 | 说明 | 101| -------- | -------- | 102| T | 返回当前组件。 | 103 104## onDragLeave 105 106onDragLeave(event: (event: DragEvent, extraParams?: string) => void): T 107 108拖拽离开组件范围内时，触发回调，当监听了[onDrop](#ondrop)事件时，此事件才有效。 109 110**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 111 112**系统能力：** SystemCapability.ArkUI.ArkUI.Full 113 114**参数：** 115 116| 参数名 | 类型 | 必填 | 说明 | 117| ----------- | ------------------------------- | ---- | ------------------------------ | 118| event | (event: [DragEvent](#dragevent7), extraParams?: string) => void | 是 | 回调函数。<br/>**说明：**<br/> event为拖拽事件信息，包括拖拽点坐标。<br/> extraParams为拖拽事件额外信息，需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 119 120**返回值：** 121 122| 类型 | 说明 | 123| -------- | -------- | 124| T | 返回当前组件。 | 125 126## onDrop 127 128onDrop(event: (event: DragEvent, extraParams?: string) => void): T 129 130绑定此事件的组件可作为释放目标。当在本组件范围内停止拖放行为时，将触发回调。如果开发者未在onDrop中主动调用event.setResult()来设置拖拽接收的结果，对于系统支持的默认可拖入组件，处理结果将以系统实际处理的数据为准。对于其他组件，系统将默认视为数据接收成功。 131 132**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 133 134**系统能力：** SystemCapability.ArkUI.ArkUI.Full 135 136**参数：** 137 138| 参数名 | 类型 | 必填 | 说明 | 139| ----------- | ------------------------------- | ---- | ------------------------------ | 140| event | (event: [DragEvent](#dragevent7), extraParams?: string) => void | 是 | 回调函数。<br/>**说明：**<br/> event为拖拽事件信息，包括拖拽点坐标。<br/> extraParams为拖拽事件额外信息，需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 141 142**返回值：** 143 144| 类型 | 说明 | 145| -------- | -------- | 146| T | 返回当前组件。 | 147 148## onDrop<sup>15+</sup> 149 150onDrop(eventCallback: OnDragEventCallback, dropOptions?: DropOptions): T 151 152绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。如果开发者没有在onDrop中主动调用event.setResult()设置拖拽接收的结果，若拖拽组件为系统支持默认拖入的组件，以系统实际处理数据结果为准，其它组件则系统按照数据接收成功处理。 153 154**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 155 156**系统能力：** SystemCapability.ArkUI.ArkUI.Full 157 158**参数：** 159 160| 参数名 | 类型 | 必填 | 说明 | 161| ----------- | ------------------------------- | ---- | ------------------------------ | 162| eventCallback | [OnDragEventCallback](#ondrageventcallback15) | 是 | 回调函数。| 163| dropOptions | [DropOptions](#dropoptions15) | 否 | 落入过程的参数。 | 164 165**返回值：** 166 167| 类型 | 说明 | 168| -------- | -------- | 169| T | 返回当前组件。 | 170 171## onDragEnd<sup>10+</sup> 172 173onDragEnd(event: (event: DragEvent, extraParams?: string) => void): T 174 175绑定此事件的组件触发的拖拽结束后，触发回调。 176 177**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 178 179**系统能力：** SystemCapability.ArkUI.ArkUI.Full 180 181**参数：** 182 183| 参数名 | 类型 | 必填 | 说明 | 184| ----------- | ------------------------------- | ---- | ------------------------------ | 185| event | (event: [DragEvent](#dragevent7), extraParams?: string) => void | 是 | 回调函数。<br/>**说明：**<br/> event为拖拽事件信息，在onDragEnd调用中不包括拖拽点坐标。<br/> extraParams为拖拽事件额外信息，需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 186 187**返回值：** 188 189| 类型 | 说明 | 190| -------- | -------- | 191| T | 返回当前组件。 | 192 193## onPreDrag<sup>12+</sup> 194 195onPreDrag(callback: Callback\<PreDragStatus>): T 196 197绑定此事件的组件，当处于拖拽发起前的不同阶段时，触发回调。 198 199**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 200 201**系统能力：** SystemCapability.ArkUI.ArkUI.Full 202 203**参数：** 204 205| 参数名 | 类型 | 必填 | 说明 | 206| ----------- | ------------------------------- | ---- | ------------------------------ | 207| callback | Callback<[PreDragStatus](#predragstatus12枚举说明)> | 是 | 回调函数。| 208 209**返回值：** 210 211| 类型 | 说明 | 212| -------- | -------- | 213| T | 返回当前组件。 | 214 215## onDragSpringLoading<sup>20+</sup> 216 217onDragSpringLoading(callback: Callback\<SpringLoadingContext\> | null, configuration?: DragSpringLoadingConfiguration): T 218 219绑定此事件的组件可作为具有悬停检测功能的拖拽响应目标。当拖拽对象悬停在目标上时，触发回调通知。此时只有一个目标可以成为响应方，并且子组件始终具有更高的响应优先级。 220 221关于悬停检测的触发机制及详细使用方法，请参考开发指南[支持悬停检测](../../../ui/arkts-common-events-drag-event.md#支持悬停检测)。 222 223**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 224 225**系统能力：** SystemCapability.ArkUI.ArkUI.Full 226 227**参数：** 228 229| 参数名 | 类型 | 必填 | 说明 | 230| :------------ | ----------------------------------------- | ---- | ---------------------------------------------- | 231| callback | Callback\<[SpringLoadingContext](#springloadingcontext20)\> \| null | 是 | 悬停检测回调函数，当值为null时禁用悬停检测。 | 232| configuration | [DragSpringLoadingConfiguration](../js-apis-arkui-dragController.md#dragspringloadingconfiguration20) | 否 | 悬停检测配置信息，为undefined时取[DragSpringLoadingConfiguration](../js-apis-arkui-dragController.md#dragspringloadingconfiguration20)默认值。 | 233 234**返回值：** 235 236| 类型 | 说明 | 237| -------- | -------- | 238| T | 返回当前组件。 | 239 240## DragItemInfo 241 242**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 243 244**系统能力：** SystemCapability.ArkUI.ArkUI.Full 245 246| 名称 | 类型 | 只读| 可选 | 说明 | 247| --------- | ---------------------------------------- | ---- | ---- | --------------------------------- | 248| pixelMap | [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 否 | 是 |设置拖拽过程中显示的图片。 | 249| 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的修改需要在下一次拖拽时生效。| 250| extraInfo | string | 否 | 是 |拖拽项的附加信息，用于描述拖拽项。 | 251 252## PreviewConfiguration<sup>15+</sup> 253 254配置自定义拖拽过程中的预览图样式。 255 256**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 257 258**系统能力：** SystemCapability.ArkUI.ArkUI.Full 259 260| 名称 | 类型 | 只读 | 可选 | 说明 | 261| ---------- | ---- | ---- | ---- | ------------------------------------------------------------ | 262| onlyForLifting | boolean | 否 | 是 | 自定义配置的预览图是否仅用于浮起。<br /> **说明：** <br/>默认值为false。true表示自定义预览图仅用于浮起，false表示可用于浮起和拖拽。设置为true时，如果发起长按拖拽，浮起时的预览图为自定义配置的预览图，拖拽时的预览图不使用[dragPreview](ts-universal-attributes-drag-drop.md#dragpreview11)属性，优先使用开发者在[onDragStart](ts-universal-events-drag-drop.md#ondragstart)中返回的预览图，如果[onDragStart](ts-universal-events-drag-drop.md#ondragstart)中没有返回预览图则使用组件自截图。| 263| delayCreating | boolean | 否 | 是 | 组件预览builder是否在设置时加载。<br/>默认值为false。true表示组件预览builder在设置时加载，false表示组件预览builder不在设置时加载。| 264 265## extraParams说明 266 267 用于返回组件在拖拽中需要用到的额外信息。 268 269 extraParams是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。 270 271| 名称 | 类型 | 描述 | 272| ------------- | ------ | ---------------------------------------- | 273| selectedIndex | number | 当拖拽事件设在父容器的子元素时，selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素，selectedIndex从0开始。<br/>仅在ListItem组件的拖拽事件中生效。 | 274| insertIndex | number | 当前拖拽元素在List组件中放下时，insertIndex表示被拖拽元素插入该组件的第insertIndex个位置，insertIndex从0开始。<br/>仅在List组件的拖拽事件中生效。 | 275 276## DragEvent<sup>7+</sup> 277 278**系统能力：** SystemCapability.ArkUI.ArkUI.Full 279 280### 属性 281 282**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 283 284**系统能力：** SystemCapability.ArkUI.ArkUI.Full 285 286| 名称 | 类型 | 只读 | 可选 | 说明 | 287| ------ | ------ | ----- | ---- | ------- | 288| useCustomDropAnimation<sup>10+</sup> | boolean | 否 | 否 |当拖拽结束时，是否禁用系统默认落位动效。<br/>应用可将该值设定为true来禁用系统默认落位动效，并实现自己的自定义落位动效。<br/>当不配置或设置为false时，系统默认落位动效生效，当[setResult](#setresult10)设置为DRAG_SUCCESSFUL时，落位为缩小消失动效，不为DRAG_SUCCESSFUL时，则为放大消失动效。<br/>当未禁用系统默认落位动效时，应用不应再实现自定义动效，以避免动效上的冲突。<br/>默认值：false | 289|dragBehavior<sup>10+</sup> | [DragBehavior](#dragbehavior10) | 否 | 否 |切换复制和剪贴模式的角标显示状态。<br/>默认值：DragBehavior.COPY。 | 290 291### setData<sup>10+</sup> 292 293setData(unifiedData: UnifiedData): void 294 295向DragEvent中设置用于拖拽的数据。 296 297**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 298 299**系统能力：** SystemCapability.ArkUI.ArkUI.Full 300 301**参数：** 302 303| 参数名 | 类型 | 必填 | 说明 | 304| ----------- | ------------------------------------------------------------ | ---- | ---------------- | 305| unifiedData | [UnifiedData](#unifieddata10) | 是 | 拖拽相关的数据。 | 306 307### getData<sup>10+</sup> 308 309getData(): UnifiedData 310 311获取拖拽相关数据。 312 313**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 314 315**系统能力：** SystemCapability.ArkUI.ArkUI.Full 316 317**返回值：** 318 319| 类型 | 说明 | 320| ------------------------------------------------------------ | ------------------------------------------------------------ | 321| [UnifiedData](../../apis-arkdata/js-apis-data-unifiedDataChannel.md#unifieddata) | 从DragEvent中获取拖拽相关数据。数据获取结果请参考错误码说明。 | 322 323**错误码：** 324 325以下错误码的详细介绍请参见[drag-event(拖拽事件)](../errorcode-drag-event.md)错误码。 326 327| 错误码ID | 错误信息 | 328| --------- | ------- | 329| 190001 | Data not found.| 330| 190002 | Data error. | 331 332### getSummary<sup>10+</sup> 333 334getSummary(): Summary 335 336获取所拖拽数据的概要，包括数据类型及大小信息；在延迟拖拽场景下，只能获取到数据类型信息。 337 338**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 339 340**系统能力：** SystemCapability.ArkUI.ArkUI.Full 341 342**返回值：** 343 344| 类型 | 说明 | 345| ------------------------------------------------------------ | ------------------------------------- | 346| [Summary](#summary10) | 拖拽相关数据的概要。 | 347 348### setResult<sup>10+</sup> 349 350setResult(dragResult: DragResult): void 351 352在DragEvent中设置拖拽结果。 353 354**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 355 356**系统能力：** SystemCapability.ArkUI.ArkUI.Full 357 358**参数：** 359 360| 参数名 | 类型 | 必填 | 说明 | 361| ---------- | ----------------------------------- | ---- | ---------- | 362| dragResult | [DragResult](#dragresult10枚举说明) | 是 | 拖拽结果。 | 363 364### getResult<sup>10+</sup> 365 366getResult(): DragResult 367 368获取拖拽结果。 369 370**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 371 372**系统能力：** SystemCapability.ArkUI.ArkUI.Full 373 374**返回值：** 375 376| 类型 | 说明 | 377| ----------------------------------- | ----------------------------- | 378| [DragResult](#dragresult10枚举说明) | 从DragEvent中获取的拖拽结果。 | 379 380### getPreviewRect<sup>10+</sup> 381 382getPreviewRect(): Rectangle 383 384获取拖拽预览图相对于当前窗口的位置，以及预览图尺寸信息。 385 386**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 387 388**系统能力：** SystemCapability.ArkUI.ArkUI.Full 389 390**返回值：** 391 392| 类型 | 说明 | 393| ------------------------------------------------------------ | ------------------------------------------------------------ | 394| [Rectangle](ts-universal-attributes-touch-target.md#rectangle对象说明) | 拖拽预览图相对于当前窗口的位置，以及预览图尺寸信息，单位vp，其中x和y代表预览图左上角的窗口坐标，width和height代表预览图的尺寸。 | 395 396### getVelocityX<sup>10+</sup> 397 398getVelocityX(): number 399 400获取当前拖拽的x轴方向拖动速度。 401 402**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 403 404**系统能力：** SystemCapability.ArkUI.ArkUI.Full 405 406**返回值：** 407 408| 类型 | 说明 | 409| ------ | ------------------------------------------------------------ | 410| number | 当前拖拽的x轴方向拖动速度。坐标轴原点为屏幕左上角，单位为vp，分正负方向速度，从左往右为正，反之为负。 | 411 412### getVelocityY<sup>10+</sup> 413 414getVelocityY(): number 415 416获取当前拖拽的y轴方向拖动速度。 417 418**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 419 420**系统能力：** SystemCapability.ArkUI.ArkUI.Full 421 422**返回值：** 423 424| 类型 | 说明 | 425| ------ | ------------------------------------------------------------ | 426| number | 当前拖拽的y轴方向拖动速度。坐标轴原点为屏幕左上角，单位为vp，分正负方向速度，从上往下为正，反之为负。 | 427 428### getVelocity<sup>10+</sup> 429 430getVelocity(): number 431 432获取当前拖拽的主方向拖动速度。 433 434**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 435 436**系统能力：** SystemCapability.ArkUI.ArkUI.Full 437 438**返回值：** 439 440| 类型 | 说明 | 441| ------ | ------------------------------------------------------------ | 442| number | 当前拖拽的主方向拖动速度。为xy轴方向速度的平方和的算术平方根，单位为vp。 | 443 444### getWindowX<sup>10+</sup> 445 446getWindowX(): number 447 448获取拖拽点相对于窗口左上角的x轴坐标。 449 450**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 451 452**系统能力：** SystemCapability.ArkUI.ArkUI.Full 453 454**返回值：** 455 456| 类型 | 说明 | 457| ------ | ----------------------------------------------- | 458| number | 当前拖拽点相对于窗口左上角的x轴坐标，单位为vp。 | 459 460### getWindowY<sup>10+</sup> 461 462getWindowY(): number 463 464获取拖拽点相对于窗口左上角的y轴坐标。 465 466**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 467 468**系统能力：** SystemCapability.ArkUI.ArkUI.Full 469 470**返回值：** 471 472| 类型 | 说明 | 473| ------ | ----------------------------------------------- | 474| number | 当前拖拽点相对于窗口左上角的y轴坐标，单位为vp。 | 475 476### getDisplayX<sup>10+</sup> 477 478getDisplayX(): number 479 480获取当前拖拽点相对于屏幕左上角的x轴坐标。 481 482**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 483 484**系统能力：** SystemCapability.ArkUI.ArkUI.Full 485 486**返回值：** 487 488| 类型 | 说明 | 489| ------ | ----------------------------------------------- | 490| number | 当前拖拽点相对于屏幕左上角的x轴坐标，单位为vp。 | 491 492### getDisplayY<sup>10+</sup> 493 494getDisplayY(): number 495 496获取当前拖拽点相对于屏幕左上角的y轴坐标。 497 498**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 499 500**系统能力：** SystemCapability.ArkUI.ArkUI.Full 501 502**返回值：** 503 504| 类型 | 说明 | 505| ------ | ----------------------------------------------- | 506| number | 当前拖拽点相对于屏幕左上角的y轴坐标，单位为vp。 | 507 508### getModifierKeyState<sup>12+</sup> 509 510getModifierKeyState?(keys: Array<string\>): boolean 511 512获取功能键按压状态。 513 514**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 515 516**系统能力：** SystemCapability.ArkUI.ArkUI.Full 517 518| 参数名 | 类型 | 必填 | 说明 | 519| ------ | ------------------- | ---- | ------------------------------------------------------------ | 520| keys | Array<string> | 是 | 获取功能键按压状态。报错信息请参考以下错误码。支持功能键 'Ctrl'\| 'Alt' \| 'Shift'。<br/>**说明：**<br/>此接口不支持在手写笔场景下使用。 | 521 522**错误码：** 523 524以下错误码的详细介绍请参见[通用错误码](../../errorcode-universal.md)。 525 526| 错误码ID | 错误信息 | 527| --------- | ------- | 528| 401 | Parameter error. Possible causes: 1. Incorrect parameter types. 2. Parameter verification failed. | 529 530**返回值：** 531 532| 类型 | 说明 | 533| ------- | ----------------------------------------------------- | 534| boolean | 是否被按下，返回true表示被按下，返回false表示未被按下 | 535 536### startDataLoading<sup>15+</sup> 537 538startDataLoading(options: DataSyncOptions): string 539 540异步获取拖拽数据，并通知开发者当前数据同步进度，仅支持在onDrop阶段使用。 541 542**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 543 544**系统能力：** SystemCapability.ArkUI.ArkUI.Full 545 546**参数：** 547 548| 参数名 | 类型 | 必填 | 说明 | 549| ------- | ------------------------------------- | ---- | ------------------------------------------------------------ | 550| options | [DataSyncOptions](#datasyncoptions15) | 是 | 获取拖拽数据时的参数，包含目标路径、文件冲突选项、进度条类型等。数据传输过程中可使用[cancelDataLoading](../arkts-apis-uicontext-dragcontroller.md#canceldataloading15)接口取消数据加载。 | 551 552**错误码：** 553 554以下错误码的详细介绍请参见[通用错误码](../../errorcode-universal.md)和[drag-event（拖拽事件）](../errorcode-drag-event.md)错误码。 555 556| 错误码ID | 错误信息 | 557| --------- | ------- | 558| 401 | Parameter error. | 559| 190003 | Operation not allowed for current phase. | 560 561**返回值：** 562 563| 类型 | 说明 | 564| ------ | ---------------------------------- | 565| string | 拖拽数据的标识，用于区分每次拖拽。 | 566 567### executeDropAnimation<sup>18+</sup> 568 569executeDropAnimation(customDropAnimation: Callback\<void\>): void 570 571设置自定义落位动效的执行函数，仅在useCustomDropAnimation为true时有效。 572 573**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 574 575**系统能力：** SystemCapability.ArkUI.ArkUI.Full 576 577**参数：** 578 579| 参数名 | 类型 | 必填 | 说明 | 580| ------ | ------ | --- | --------- | 581| customDropAnimation | [Callback\<void\>](../../../reference/apis-basic-services-kit/js-apis-base.md#callback) | 是 |在此回调函数中实现自定义落位动效。<br/> **说明：** <br/>1. 该接口仅在onDrop回调中使用有效。<br/> 2. 使用前需设置useCustomDropAnimation为true，否则该接口不生效。<br/> 3. 不要在动画callback中实现与动效无关的逻辑，避免影响执行效率。| 582 583### getDisplayId<sup>20+</sup> 584 585getDisplayId(): number 586 587获取当前拖拽事件发生时所在的屏幕ID，不支持当eventType为NODE_ON_DRAG_END时获取。 588 589**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 590 591**系统能力：** SystemCapability.ArkUI.ArkUI.Full 592 593**返回值：** 594 595| 类型 | 说明 | 596| ------ | -------------------------------- | 597| number | 当前拖拽事件发生时所在的屏幕ID。 | 598 599### getDragSource<sup>20+</sup> 600 601getDragSource(): string 602 603获取拖起方包名。 604 605**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 606 607**系统能力：** SystemCapability.ArkUI.ArkUI.Full 608 609**返回值：** 610 611| 类型 | 说明 | 612| ------ | -------------- | 613| string | 拖起方的包名。 | 614 615### isRemote<sup>20+</sup> 616 617isRemote(): boolean 618 619获取是否是跨设备拖拽，跨设备拖拽时为true。 620 621**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 622 623**系统能力：** SystemCapability.ArkUI.ArkUI.Full 624 625**返回值：** 626 627| 类型 | 说明 | 628| ------- | ------------------------------------------------------------ | 629| boolean | 是否是跨设备拖拽，返回true表示是跨设备拖拽，返回false表示不是跨设备拖拽。 | 630 631### setDataLoadParams<sup>20+</sup> 632 633setDataLoadParams(dataLoadParams: DataLoadParams): void 634 635设置起拖方延迟提供数据。使用此方法向系统提供数据加载参数，而不是直接提供完整的数据对象。当用户在目标应用程序上落入时，系统将使用此参数从起拖方请求实际数据。与[setData](#setdata10)方法同时使用，以最后调用的方法为准。该接口仅在[onDragStart](ts-universal-events-drag-drop.md#ondragstart)回调中生效。 636 637**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 638 639**系统能力：** SystemCapability.ArkUI.ArkUI.Full 640 641**参数：** 642 643| 参数名 | 类型 | 必填 | 说明 | 644| -------| -------| ------- | ------------------------------------------------------------ | 645| dataLoadParams | [DataLoadParams](#dataloadparams20) | 是 | 落入操作时使用的数据加载参数。 | 646 647### getX<sup>(deprecated)</sup> 648 649getX(): number 650 651当前拖拽点相对于窗口左上角的x轴坐标，单位为vp。从API version 10开始不再维护，建议使用[getWindowX()](#getwindowx10)代替。 652 653**系统能力：** SystemCapability.ArkUI.ArkUI.Full 654 655**返回值：** 656 657| 类型 | 说明 | 658| ------ | --------------------------------------------------- | 659| number | 返回当前拖拽点相对于窗口左上角的x轴坐标。<br/>单位：vp | 660 661### getY<sup>(deprecated)</sup> 662 663getY(): number 664 665当前拖拽点相对于窗口左上角的y轴坐标，单位为vp。从API version 10开始不再维护，建议使用[getWindowY()](#getwindowy10)代替。 666 667**系统能力：** SystemCapability.ArkUI.ArkUI.Full 668 669**返回值：** 670 671| 类型 | 说明 | 672| ------ | --------------------------------------------------- | 673| number | 返回当前拖拽点相对于窗口左上角的y轴坐标。<br/>单位：vp | 674 675### getGlobalDisplayX<sup>20+</sup> 676 677getGlobalDisplayX(): number 678 679当前拖拽点相对于全局屏幕的左上角的X坐标。 680 681**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 682 683**系统能力：** SystemCapability.ArkUI.ArkUI.Full 684 685**返回值：** 686 687| 类型 | 说明 | 688| ------ | --------------------------------------------------- | 689| number | 返回当前拖拽点相对于全局屏幕的左上角的X坐标。<br/>单位：vp，取值范围：[0, +∞)| 690 691### getGlobalDisplayY<sup>20+</sup> 692 693getGlobalDisplayY(): number 694 695当前拖拽点相对于全局屏幕的左上角的Y坐标。 696 697**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 698 699**系统能力：** SystemCapability.ArkUI.ArkUI.Full 700 701**返回值：** 702 703| 类型 | 说明 | 704| ------ | --------------------------------------------------- | 705| number | 返回当前拖拽点相对于全局屏幕的左上角的Y坐标。<br/>单位：vp，取值范围：[0, +∞)| 706 707## DragResult<sup>10+</sup>枚举说明 708 709**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 710 711**系统能力：** SystemCapability.ArkUI.ArkUI.Full 712 713| 名称 | 值 | 说明 | 714| ----- | -- | --------------- | 715| DRAG_SUCCESSFUL | 0 |拖拽成功，在[onDrop](#ondrop)中使用。 | 716| DRAG_FAILED | 1 |拖拽失败，在[onDrop](#ondrop)中使用。 | 717| DRAG_CANCELED | 2 |拖拽取消，在[onDrop](#ondrop)中使用。 | 718| DROP_ENABLED | 3 |组件允许落入，在[onDragEnter](#ondragenter)，[onDragMove](#ondragmove)，[onDragLeave](#ondragleave)中使用。 | 719| DROP_DISABLED | 4 |组件不允许落入，在[onDragEnter](#ondragenter)，[onDragMove](#ondragmove)，[onDragLeave](#ondragleave)中使用。 | 720 721## DragBehavior<sup>10+</sup> 722 723当设置[DragResult](#dragresult10枚举说明)为DROP_ENABLED后，可设置DragBehavior为复制（COPY）或剪切（MOVE）。DragBehavior用来向开发者描述数据的处理方式是复制（COPY）还是剪切（MOVE），但无法最终决定对数据的实际处理方式。DragBehavior会通过onDragEnd带回给数据拖出方，发起拖拽的一方可通过DragBehavior来区分做出的是复制（COPY）还是剪切（MOVE）数据的不同行为。 724 725**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 726 727**系统能力：** SystemCapability.ArkUI.ArkUI.Full 728 729| 名称 | 值 | 说明 | 730| ----- | -- | ----------------- | 731| COPY | - |指定对数据的处理方式为复制。| 732| MOVE| - |指定对数据的处理方式为剪切。| 733 734## PreDragStatus<sup>12+</sup>枚举说明 735 736**系统能力：** SystemCapability.ArkUI.ArkUI.Full 737 738| 名称 | 值 | 说明 | 739| ---- | - | ----------------- | 740| ACTION_DETECTING_STATUS | 0 | 拖拽手势启动阶段。(按下50ms时触发)<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 741| READY_TO_TRIGGER_DRAG_ACTION | 1 | 拖拽准备完成，可发起拖拽阶段。(按下500ms时触发)<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 742| PREVIEW_LIFT_STARTED | 2 | 拖拽浮起动效发起阶段。(按下800ms时触发)<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 743| PREVIEW_LIFT_FINISHED | 3 | 拖拽浮起动效结束阶段。(浮起动效完全结束时触发)<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 744| PREVIEW_LANDING_STARTED | 4 | 拖拽落回动效发起阶段。(落回动效发起时触发)<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 745| PREVIEW_LANDING_FINISHED | 5 | 拖拽落回动效结束阶段。(落回动效结束时触发)<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 746| ACTION_CANCELED_BEFORE_DRAG | 6 | 拖拽浮起落位动效中断。(已满足READY_TO_TRIGGER_DRAG_ACTION状态后，未达到动效阶段，手指抬手时触发)<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 747| PREPARING_FOR_DRAG_DETECTION<sup>18+</sup> | 7 | 拖拽准备完成，可发起拖拽阶段。(按下350ms时触发)<br>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 748 749## UnifiedData<sup>10+</sup> 750 751type UnifiedData = UnifiedData 752 753拖拽相关的数据。 754 755**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 756 757**系统能力：** SystemCapability.ArkUI.ArkUI.Full 758 759| 类型 | 说明 | 760| ----- | ----------------- | 761| [UnifiedData](../../apis-arkdata/js-apis-data-unifiedDataChannel.md#unifieddata) | 拖拽相关的数据。| 762 763## Summary<sup>10+</sup> 764 765type Summary = Summary 766 767拖拽相关数据的简介。 768 769**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 770 771**系统能力：** SystemCapability.ArkUI.ArkUI.Full 772 773| 类型 | 说明 | 774| ----- | ----------------- | 775| [Summary](../../apis-arkdata/js-apis-data-unifiedDataChannel.md#summary) | 拖拽相关数据的简介。| 776 777## DataLoadParams<sup>20+</sup> 778 779type DataLoadParams = DataLoadParams 780 781落入操作时使用的数据加载参数。 782 783**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 784 785**系统能力：** SystemCapability.ArkUI.ArkUI.Full 786 787| 类型 | 说明 | 788| ----- | ----------------- | 789| [DataLoadParams](../../apis-arkdata/js-apis-data-unifiedDataChannel.md#dataloadparams20) | 落入操作时使用的数据加载参数。| 790 791## DataSyncOptions<sup>15+</sup> 792 793type DataSyncOptions = GetDataParams 794 795作为startDataLoading的入参对象。 796 797**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 798 799**系统能力：** SystemCapability.ArkUI.ArkUI.Full 800 801| 类型 | 说明 | 802| ----- | ----------------- | 803| [GetDataParams](../../apis-arkdata/js-apis-data-unifiedDataChannel.md#getdataparams15) | 表示从UDMF获取数据时的参数，包含目标路径、文件冲突选项、进度条类型等。| 804 805## OnDragEventCallback<sup>15+</sup> 806 807type OnDragEventCallback = (event: DragEvent, extraParams?: string) => void 808 809拖拽事件的回调函数。 810 811**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 812 813**系统能力：** SystemCapability.ArkUI.ArkUI.Full 814 815| 参数名 | 类型 |必填 |说明 | 816| ----- | ----------------- | ----- | ----- | 817| event | [DragEvent](#dragevent7)| 是 | event为拖拽事件信息，包括拖拽点坐标。| 818| extraParams| string |否 | extraParams为拖拽事件额外信息，需要解析为Json格式，参考[extraParams](#extraparams说明)说明。| 819 820## DropOptions<sup>15+</sup> 821 822设置落入过程的参数。 823 824**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 825 826**系统能力：** SystemCapability.ArkUI.ArkUI.Full 827 828| 名称 | 类型 | 只读 | 可选 | 说明 | 829| ------ | ------ | ---------------- | ------ | ------ | 830| disableDataPrefetch | boolean | 否 | 否 | 设置拖拽是否提前获取数据。true表示不提前获取数据，false表示提前获取数据，默认值为false。<br/>**说明：**<br/> 当使用[startDataLoading](#startdataloading15)获取数据时需设置该参数为true，防止拖拽提前获取数据。 | 831 832## DragSpringLoadingConfiguration<sup>20+</sup> 833 834type DragSpringLoadingConfiguration = DragSpringLoadingConfiguration 835 836定义拖拽的悬停检测配置参数的接口。 837 838**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 839 840**系统能力：** SystemCapability.ArkUI.ArkUI.Full 841 842| 类型 | 说明 | 843| ----- | ----------------- | 844| [DragSpringLoadingConfiguration](../js-apis-arkui-dragController.md#dragspringloadingconfiguration20) | 定义拖拽的悬停检测配置参数的接口。| 845 846## SpringLoadingContext<sup>20+</sup> 847 848type SpringLoadingContext = SpringLoadingContext 849 850定义回调上下文信息的类，用于在悬停检测回调中传递给应用程序，使其能访问拖拽状态。 851 852**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 853 854**系统能力：** SystemCapability.ArkUI.ArkUI.Full 855 856| 类型 | 说明 | 857| ----- | ----------------- | 858| [SpringLoadingContext](../js-apis-arkui-dragController.md#springloadingcontext20) | 定义回调上下文信息的类，用于在悬停检测回调中传递给应用程序，以便应用程序能访问拖拽状态。| 859 860## 示例 861 862### 示例1（设置组件拖拽和落入） 863 864示例1展示了部分组件（如Image和Text等）拖拽和可落入区域的设置。 865 866```ts 867// xxx.ets 868import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData'; 869import { BusinessError } from '@kit.BasicServicesKit'; 870 871@Entry 872@Component 873struct Index { 874 @State targetImage: string = ''; 875 @State targetText: string = 'Drag Text'; 876 @State imageWidth: number = 100; 877 @State imageHeight: number = 100; 878 @State imgState: Visibility = Visibility.Visible; 879 @State abstractContent: string = "abstract"; 880 @State textContent: string = ""; 881 @State backGroundColor: Color = Color.Transparent; 882 883 @Builder 884 pixelMapBuilder() { 885 Column() { 886 Image($r('app.media.icon')) 887 .width(120) 888 .height(120) 889 .backgroundColor(Color.Yellow) 890 } 891 } 892 893 getDataFromUdmfRetry(event: DragEvent, callback: (data: DragEvent) => void) { 894 try { 895 let data: UnifiedData = event.getData(); 896 if (!data) { 897 return false; 898 } 899 let records: Array<unifiedDataChannel.UnifiedRecord> = data.getRecords(); 900 if (!records || records.length <= 0) { 901 return false; 902 } 903 callback(event); 904 return true; 905 } catch (e) { 906 console.error("getData failed, code = " + (e as BusinessError).code + ", message = " + (e as BusinessError).message); 907 return false; 908 } 909 } 910 911 getDataFromUdmf(event: DragEvent, callback: (data: DragEvent) => void) { 912 if (this.getDataFromUdmfRetry(event, callback)) { 913 return; 914 } 915 setTimeout(() => { 916 this.getDataFromUdmfRetry(event, callback); 917 }, 1500); 918 } 919 920 private PreDragChange(preDragStatus: PreDragStatus): void { 921 if (preDragStatus == PreDragStatus.READY_TO_TRIGGER_DRAG_ACTION) { 922 this.backGroundColor = Color.Red; 923 } else if (preDragStatus == PreDragStatus.ACTION_CANCELED_BEFORE_DRAG 924 || preDragStatus == PreDragStatus.PREVIEW_LANDING_FINISHED) { 925 this.backGroundColor = Color.Blue; 926 } 927 } 928 929 build() { 930 Row() { 931 Column() { 932 Text('start Drag') 933 .fontSize(18) 934 .width('100%') 935 .height(40) 936 .margin(10) 937 .backgroundColor('#008888') 938 Image($r('app.media.icon')) 939 .width(100) 940 .height(100) 941 .draggable(true) 942 .margin({ left: 15 }) 943 .visibility(this.imgState) 944 .onDragEnd((event) => { 945 // onDragEnd里取到的result值在接收方onDrop设置 946 if (event.getResult() === DragResult.DRAG_SUCCESSFUL) { 947 this.getUIContext().getPromptAction().showToast({ duration: 100, message: 'Drag Success' }); 948 } else if (event.getResult() === DragResult.DRAG_FAILED) { 949 this.getUIContext().getPromptAction().showToast({ duration: 100, message: 'Drag failed' }); 950 } 951 }) 952 Text('test drag event') 953 .width('100%') 954 .height(100) 955 .draggable(true) 956 .margin({ left: 15 }) 957 .copyOption(CopyOptions.InApp) 958 TextArea({ placeholder: 'please input words' }) 959 .copyOption(CopyOptions.InApp) 960 .width('100%') 961 .height(50) 962 .draggable(true) 963 Search({ placeholder: 'please input you word' }) 964 .searchButton('Search') 965 .width('100%') 966 .height(80) 967 .textFont({ size: 20 }) 968 969 Column() { 970 Text('this is abstract') 971 .fontSize(20) 972 .width('100%') 973 }.margin({ left: 40, top: 20 }) 974 .width('100%') 975 .height(100) 976 .onDragStart((event) => { 977 this.backGroundColor = Color.Transparent; 978 let data: unifiedDataChannel.PlainText = new unifiedDataChannel.PlainText(); 979 data.abstract = 'this is abstract'; 980 data.textContent = 'this is content this is content'; 981 (event as DragEvent).setData(new unifiedDataChannel.UnifiedData(data)); 982 }) 983 .onPreDrag((status: PreDragStatus) => { 984 this.PreDragChange(status); 985 }) 986 .backgroundColor(this.backGroundColor) 987 }.width('45%') 988 .height('100%') 989 990 Column() { 991 Text('Drag Target Area') 992 .fontSize(20) 993 .width('100%') 994 .height(40) 995 .margin(10) 996 .backgroundColor('#008888') 997 Image(this.targetImage) 998 .width(this.imageWidth) 999 .height(this.imageHeight) 1000 .draggable(true) 1001 .margin({ left: 15 }) 1002 .border({ color: Color.Black, width: 1 }) 1003 .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE]) 1004 .onDrop((dragEvent?: DragEvent) => { 1005 this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => { 1006 let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords(); 1007 let rect: Rectangle = event.getPreviewRect(); 1008 this.imageWidth = Number(rect.width); 1009 this.imageHeight = Number(rect.height); 1010 this.targetImage = (records[0] as unifiedDataChannel.Image).imageUri; 1011 event.useCustomDropAnimation = false; 1012 this.imgState = Visibility.None; 1013 // 显式设置result为successful，则将该值传递给拖出方的onDragEnd 1014 event.setResult(DragResult.DRAG_SUCCESSFUL); 1015 }) 1016 }) 1017 1018 Text(this.targetText) 1019 .width('100%') 1020 .height(100) 1021 .border({ color: Color.Black, width: 1 }) 1022 .margin(15) 1023 .allowDrop([uniformTypeDescriptor.UniformDataType.PLAIN_TEXT]) 1024 .onDrop((dragEvent?: DragEvent) => { 1025 this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => { 1026 let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords(); 1027 let plainText: unifiedDataChannel.PlainText = records[0] as unifiedDataChannel.PlainText; 1028 this.targetText = plainText.textContent; 1029 }) 1030 }) 1031 1032 Column() { 1033 Text(this.abstractContent).fontSize(20).width('100%') 1034 Text(this.textContent).fontSize(15).width('100%') 1035 } 1036 .width('100%') 1037 .height(100) 1038 .margin(20) 1039 .border({ color: Color.Black, width: 1 }) 1040 .allowDrop([uniformTypeDescriptor.UniformDataType.PLAIN_TEXT]) 1041 .onDrop((dragEvent?: DragEvent) => { 1042 this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => { 1043 let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords(); 1044 let plainText: unifiedDataChannel.PlainText = records[0] as unifiedDataChannel.PlainText; 1045 this.abstractContent = plainText.abstract as string; 1046 this.textContent = plainText.textContent; 1047 }) 1048 }) 1049 }.width('45%') 1050 .height('100%') 1051 .margin({ left: '5%' }) 1052 } 1053 .height('100%') 1054 } 1055} 1056``` 1057 1058 1059### 示例2（自定义落位动效） 1060 1061示例2展示了通过自定义接口executeDropAnimation，实现落位动效。 1062```ts 1063import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData'; 1064 1065@Entry 1066@Component 1067struct DropAnimationExample { 1068 @State targetImage: string = ''; 1069 @State targetText: string = 'Drag Text'; 1070 @State hyperLinkText: string = 'HyperLink'; 1071 @State hyperLinkContent: string = 'HyperLink'; 1072 @State imageWidth: number = 100; 1073 @State imageHeight: number = 100; 1074 @State imgState: Visibility = Visibility.Visible; 1075 @State videoSrc: string = 'resource://RAWFILE/02.mp4'; 1076 @State abstractContent: string = "abstract"; 1077 @State textContent: string = ""; 1078 1079 customDropAnimation = 1080 () => { 1081 this.getUIContext().animateTo({ duration: 1000, curve: Curve.EaseOut, playMode: PlayMode.Normal }, () => { 1082 this.imageWidth = 200; 1083 this.imageHeight = 200; 1084 this.imgState = Visibility.None; 1085 }) 1086 } 1087 1088 build() { 1089 Row() { 1090 Column() { 1091 Image($r('app.media.app_icon')) 1092 .width(100) 1093 .height(100) 1094 .draggable(true) 1095 .margin({ left: 15 ,top: 40}) 1096 .visibility(this.imgState) 1097 .onDragStart((event) => { 1098 }) 1099 .onDragEnd((event) => { 1100 if (event.getResult() === DragResult.DRAG_SUCCESSFUL) { 1101 console.info('Drag Success'); 1102 } else if (event.getResult() === DragResult.DRAG_FAILED) { 1103 console.error('Drag failed'); 1104 } 1105 }) 1106 }.width('45%') 1107 .height('100%') 1108 Column() { 1109 Text('Drag Target Area') 1110 .fontSize(20) 1111 .width(180) 1112 .height(40) 1113 .textAlign(TextAlign.Center) 1114 .margin(10) 1115 .backgroundColor('rgb(240,250,255)') 1116 Column() { 1117 Image(this.targetImage) 1118 .width(this.imageWidth) 1119 .height(this.imageHeight) 1120 } 1121 .draggable(true) 1122 .margin({ left: 15 }) 1123 .border({ color: Color.Black, width: 1 }) 1124 .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE]) 1125 .onDrop((dragEvent: DragEvent) => { 1126 let records: Array<unifiedDataChannel.UnifiedRecord> = dragEvent.getData().getRecords(); 1127 let rect: Rectangle = dragEvent.getPreviewRect(); 1128 this.imageWidth = Number(rect.width); 1129 this.imageHeight = Number(rect.height); 1130 this.targetImage = (records[0] as unifiedDataChannel.Image).imageUri; 1131 dragEvent.useCustomDropAnimation = true; 1132 dragEvent.executeDropAnimation(this.customDropAnimation) 1133 }) 1134 .width(this.imageWidth) 1135 .height(this.imageHeight) 1136 }.width('45%') 1137 .height('100%') 1138 .margin({ left: '5%' }) 1139 } 1140 .height('100%') 1141 } 1142} 1143``` 1144 1145 1146### 示例3（拖拽异步获取数据） 1147 1148示例3展示了通过startDataLoading实现拖拽异步获取数据。 1149 1150```ts 1151import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData'; 1152import { fileUri, fileIo as fs } from '@kit.CoreFileKit'; 1153import { common } from '@kit.AbilityKit'; 1154 1155@Entry 1156@Component 1157struct ImageExample { 1158 @State uri: string = ""; 1159 @State blockArr: string[] = []; 1160 uiContext = this.getUIContext(); 1161 udKey: string = ''; 1162 1163 build() { 1164 Column() { 1165 Text('Image拖拽') 1166 .fontSize('30dp') 1167 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) { 1168 Image($r('app.media.startIcon')) 1169 .width(100) 1170 .height(100) 1171 .border({ width: 1 }) 1172 .draggable(true) 1173 .onDragStart((event:DragEvent) => { 1174 const context: Context|undefined = this.uiContext.getHostContext(); 1175 if(context) { 1176 let data = context.resourceManager.getMediaContentSync($r('app.media.startIcon').id, 120); 1177 const arrayBuffer: ArrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset); 1178 let filePath = context.filesDir + '/test.png'; 1179 let file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE); 1180 fs.writeSync(file.fd, arrayBuffer); 1181 //获取图片的uri 1182 let uri = fileUri.getUriFromPath(filePath); 1183 let image: unifiedDataChannel.Image = new unifiedDataChannel.Image(); 1184 image.imageUri = uri; 1185 let dragData: unifiedDataChannel.UnifiedData = new unifiedDataChannel.UnifiedData(image); 1186 (event as DragEvent).setData(dragData); 1187 } 1188 }) 1189 } 1190 .margin({ bottom: 20 }) 1191 Row() { 1192 Column(){ 1193 Text('可释放区域') 1194 .fontSize('15dp') 1195 .height('10%') 1196 List(){ 1197 ForEach(this.blockArr, (item:string, index) => { 1198 ListItem() { 1199 Image(item) 1200 .width(100) 1201 .height(100) 1202 .border({width: 1}) 1203 } 1204 .margin({ left: 30 , top : 30}) 1205 }, (item:string) => item) 1206 } 1207 .border({width: 1}) 1208 .height('90%') 1209 .width('100%') 1210 .onDrop((event?: DragEvent, extraParams?: string) => { 1211 console.info("enter onDrop") 1212 let context = this.uiContext.getHostContext() as common.UIAbilityContext; 1213 let pathDir: string = context.distributedFilesDir; 1214 let destUri = fileUri.getUriFromPath(pathDir); 1215 let progressListener: unifiedDataChannel.DataProgressListener = (progress: unifiedDataChannel.ProgressInfo, dragData: UnifiedData|null) => { 1216 if(dragData != null) { 1217 let arr:Array<unifiedDataChannel.UnifiedRecord> = dragData.getRecords(); 1218 if(arr.length > 0) { 1219 if (arr[0].getType() === uniformTypeDescriptor.UniformDataType.IMAGE) { 1220 let image = arr[0] as unifiedDataChannel.Image; 1221 this.uri = image.imageUri; 1222 this.blockArr.splice(JSON.parse(extraParams as string).insertIndex, 0, this.uri); 1223 } 1224 } else { 1225 console.info('dragData arr is null'); 1226 } 1227 } else { 1228 console.info('dragData is undefined'); 1229 } 1230 console.info(`percentage: ${progress.progress}`); 1231 }; 1232 let options: DataSyncOptions = { 1233 destUri: destUri, 1234 fileConflictOptions: unifiedDataChannel.FileConflictOptions.OVERWRITE, 1235 progressIndicator: unifiedDataChannel.ProgressIndicator.DEFAULT, 1236 dataProgressListener: progressListener, 1237 } 1238 try { 1239 this.udKey = (event as DragEvent).startDataLoading(options); 1240 console.info('udKey: ', this.udKey); 1241 } catch(e) { 1242 console.error(`startDataLoading errorCode: ${e.code}, errorMessage: ${e.message}`); 1243 } 1244 }, {disableDataPrefetch: true}) 1245 } 1246 .height("50%") 1247 .width("90%") 1248 .border({ width: 1 }) 1249 } 1250 Button('取消数据传输') 1251 .onClick(() => { 1252 try { 1253 this.getUIContext().getDragController().cancelDataLoading(this.udKey); 1254 } catch (e) { 1255 console.error(`cancelDataLoading errorCode: ${e.code}, errorMessage: ${e.message}`); 1256 } 1257 }) 1258 .margin({top: 10}) 1259 }.width('100%') 1260 } 1261} 1262``` 1263### 示例4（获取当前拖拽的屏幕ID） 1264 1265示例4展示了通过onDragXXX（不支持onDragEnd）接口获取到拖拽事件，并调用拖拽事件里的getDisplayId接口获取屏幕ID。 1266 1267```ts 1268import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData'; 1269import { BusinessError } from '@kit.BasicServicesKit'; 1270 1271@Entry 1272@Component 1273struct Index { 1274 @State targetImage: string = ''; 1275 @State imageWidth: number = 100; 1276 @State imageHeight: number = 100; 1277 @State imgState: Visibility = Visibility.Visible; 1278 @State backGroundColor: Color = Color.Transparent; 1279 @State startDisplayId: number = -1; 1280 @State enterDisplayId: number = -1; 1281 @State moveDisplayId: number = -1; 1282 @State leaveDisplayId: number = -1; 1283 @State dropDisplayId: number = -1; 1284 1285 @Builder 1286 pixelMapBuilder() { 1287 Column() { 1288 Image($r('app.media.app_icon')) 1289 .width(120) 1290 .height(120) 1291 .backgroundColor(Color.Yellow) 1292 } 1293 } 1294 1295 getDataFromUdmfRetry(event: DragEvent, callback: (data: DragEvent) => void) { 1296 try { 1297 let data: UnifiedData = event.getData(); 1298 if (!data) { 1299 return false; 1300 } 1301 let records: Array<unifiedDataChannel.UnifiedRecord> = data.getRecords(); 1302 if (!records || records.length <= 0) { 1303 return false; 1304 } 1305 callback(event); 1306 return true; 1307 } catch (e) { 1308 console.error("getData failed, code = " + (e as BusinessError).code + ", message = " + (e as BusinessError).message); 1309 return false; 1310 } 1311 } 1312 1313 getDataFromUdmf(event: DragEvent, callback: (data: DragEvent) => void) { 1314 if (this.getDataFromUdmfRetry(event, callback)) { 1315 return; 1316 } 1317 setTimeout(() => { 1318 this.getDataFromUdmfRetry(event, callback); 1319 }, 1500); 1320 } 1321 1322 private PreDragChange(preDragStatus: PreDragStatus): void { 1323 if (preDragStatus == PreDragStatus.READY_TO_TRIGGER_DRAG_ACTION) { 1324 this.backGroundColor = Color.Red; 1325 } else if (preDragStatus == PreDragStatus.ACTION_CANCELED_BEFORE_DRAG 1326 || preDragStatus == PreDragStatus.PREVIEW_LANDING_FINISHED) { 1327 this.backGroundColor = Color.Blue; 1328 } 1329 } 1330 1331 build() { 1332 Row() { 1333 Column() { 1334 Text('start Drag') 1335 .fontSize(18) 1336 .width('100%') 1337 .height(40) 1338 .margin(10) 1339 .backgroundColor('#008888') 1340 Image($r('app.media.startIcon')) 1341 .width(100) 1342 .height(100) 1343 .draggable(true) 1344 .margin({ left: 15 }) 1345 .visibility(this.imgState) 1346 .onDragStart((event) => { 1347 let id = event.getDisplayId(); 1348 this.startDisplayId = id; 1349 }) 1350 1351 .onDragEnd((event) => { 1352 if (event.getResult() === DragResult.DRAG_SUCCESSFUL) { 1353 this.getUIContext().getPromptAction().showToast({ duration: 100, message: 'Drag Success' }); 1354 } else if (event.getResult() === DragResult.DRAG_FAILED) { 1355 this.getUIContext().getPromptAction().showToast({ duration: 100, message: 'Drag failed' }); 1356 } 1357 }) 1358 1359 Text('displayID in onDragStart: ' + this.startDisplayId.toString()) 1360 .width('100%') 1361 .height(50) 1362 .draggable(true) 1363 .margin({ left: 15 }) 1364 Text('displayID in onDragEnter: ' + this.enterDisplayId.toString()) 1365 .width('100%') 1366 .height(50) 1367 .draggable(true) 1368 .margin({ left: 15 }) 1369 Text('displayID in onDragMove: ' + this.moveDisplayId.toString()) 1370 .width('100%') 1371 .height(50) 1372 .draggable(true) 1373 .margin({ left: 15 }) 1374 Text('displayID in onDragLeave: ' + this.leaveDisplayId.toString()) 1375 .width('100%') 1376 .height(50) 1377 .draggable(true) 1378 .margin({ left: 15 }) 1379 Text('displayID in onDrop: ' + this.dropDisplayId.toString()) 1380 .width('100%') 1381 .height(50) 1382 .draggable(true) 1383 .margin({ left: 15 }) 1384 .onPreDrag((status: PreDragStatus) => { 1385 this.PreDragChange(status); 1386 }) 1387 }.width('45%') 1388 .height('100%') 1389 1390 Column() { 1391 Text('Drag Target Area') 1392 .fontSize(20) 1393 .width('100%') 1394 .height(40) 1395 .margin(10) 1396 .backgroundColor('#008888') 1397 Image(this.targetImage) 1398 .width(this.imageWidth) 1399 .height(this.imageHeight) 1400 .draggable(true) 1401 .margin({ left: 15 }) 1402 .border({ color: Color.Black, width: 1 }) 1403 .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE]) 1404 .onDragEnter((event) => { 1405 let id = event.getDisplayId(); 1406 this.enterDisplayId = id; 1407 }) 1408 .onDragMove((event) => { 1409 let id = event.getDisplayId(); 1410 this.moveDisplayId = id; 1411 }) 1412 .onDragLeave((event) => { 1413 let id = event.getDisplayId(); 1414 this.leaveDisplayId = id; 1415 }) 1416 .onDrop((dragEvent: DragEvent) => { 1417 let id = dragEvent.getDisplayId(); 1418 this.dropDisplayId = id; 1419 this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => { 1420 let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords(); 1421 let rect: Rectangle = event.getPreviewRect(); 1422 this.imageWidth = Number(rect.width); 1423 this.imageHeight = Number(rect.height); 1424 this.targetImage = (records[0] as unifiedDataChannel.Image).imageUri; 1425 event.useCustomDropAnimation = false; 1426 this.imgState = Visibility.None; 1427 event.setResult(DragResult.DRAG_SUCCESSFUL); 1428 }) 1429 }) 1430 }.width('45%') 1431 .height('100%') 1432 .margin({ left: '5%' }) 1433 } 1434 .height('100%') 1435 } 1436} 1437``` 1438 1439 1440### 示例5（获取包名和是否是跨设备） 1441 1442示例5展示了通过onDragXXX接口获取到拖拽事件，调用拖拽事件里的getDragSource接口获取包名，调用isRemote接口获取是否是跨设备。 1443 1444```ts 1445@Entry 1446@Component 1447struct Index { 1448 @State targetImage: string = ''; 1449 @State startDragSource: string = ''; 1450 @State startIsRemote: boolean = true; 1451 @State enterDragSource: string = ''; 1452 @State enterIsRemote: boolean = true; 1453 1454 build() { 1455 Column() { 1456 Row() { 1457 Column() { 1458 Text('start Drag Area') 1459 .fontSize(18) 1460 .width('100%') 1461 .height(40) 1462 .margin(10) 1463 .backgroundColor('#008888') 1464 Image($r('app.media.startIcon')) 1465 .onDragStart((event) => { 1466 this.startDragSource = (event as DragEvent).getDragSource(); 1467 this.startIsRemote = (event as DragEvent).isRemote(); 1468 }) 1469 .width(100) 1470 .height(100) 1471 .draggable(true) 1472 .margin({ left: 15 }) 1473 } 1474 .border({ color: Color.Black, width: 1 }) 1475 .width('45%') 1476 .height('50%') 1477 1478 Column() { 1479 Text('Drag Target Area') 1480 .fontSize(20) 1481 .width('100%') 1482 .height(40) 1483 .margin(10) 1484 .backgroundColor('#008888') 1485 Image(this.targetImage) 1486 .width(100) 1487 .height(100) 1488 .draggable(true) 1489 .margin({ left: 15 }) 1490 .border({ color: Color.Black, width: 1 }) 1491 .onDragEnter((event) => { 1492 this.enterDragSource = (event as DragEvent).getDragSource(); 1493 this.enterIsRemote = (event as DragEvent).isRemote(); 1494 }) 1495 .onDrop(()=>{}) 1496 } 1497 .border({ color: Color.Black, width: 1 }) 1498 .width('45%') 1499 .height('50%') 1500 .margin({ left: '5%' }) 1501 } 1502 .height('70%') 1503 1504 Text('onDragStart dragSource: ' + this.startDragSource.toString() + '\n' + 'onDragStart isRemote: ' + 1505 this.startIsRemote.toString()) 1506 .width('100%') 1507 .height(50) 1508 .margin({ left: 15 }) 1509 Text('onDragEnter dragSource: ' + this.enterDragSource.toString() + '\n' + 'onDragEnter isRemote: ' + 1510 this.enterIsRemote.toString()) 1511 .width('100%') 1512 .height(50) 1513 .margin({ left: 15 }) 1514 } 1515 } 1516} 1517``` 1518 1519 1520### 示例6（拖拽支持悬停检测） 1521 1522示例6展示了通过onDragSpringLoading接口注册回调，并调用SpringLoadingContext接口获取上下文（当前状态、通知序列）。 1523 1524```ts 1525// xxx.ets 1526@Entry 1527@Component 1528struct Index { 1529 @State targetText: string = 'Drag Text'; 1530 @State state: number = 0; 1531 @State currentNotifySequence: number = 0; 1532 @State config: DragSpringLoadingConfiguration = { 1533 stillTimeLimit: 200, 1534 updateInterval: 300, 1535 updateNotifyCount: 4, 1536 updateToFinishInterval: 300 1537 }; 1538 1539 build() { 1540 Row() { 1541 Column() { 1542 Text('start Drag') 1543 .fontSize(18) 1544 .width('100%') 1545 .height(40) 1546 .margin(10) 1547 .backgroundColor('#008888') 1548 Image($r('app.media.startIcon')) 1549 .id("ori_image") 1550 .width(100) 1551 .height(100) 1552 .draggable(true) 1553 .margin({ left: 15 }) 1554 Text('当前状态是： ' + this.state) 1555 .fontSize(18) 1556 .width('100%') 1557 .height(40) 1558 .margin(10) 1559 Text('当前通知序列是： ' + this.currentNotifySequence) 1560 .fontSize(18) 1561 .width('100%') 1562 .height(40) 1563 .margin(10) 1564 } 1565 .width('45%') 1566 .height('100%') 1567 1568 Column() { 1569 Text('Drag Target Area') 1570 .fontSize(20) 1571 .width('100%') 1572 .height(40) 1573 .margin(10) 1574 .backgroundColor('#008888') 1575 .id("text") 1576 Image("") 1577 .width(100) 1578 .height(100) 1579 .draggable(true) 1580 .margin({ left: 15 }) 1581 .border({ color: Color.Black, width: 2 }) 1582 .onDragSpringLoading((context: SpringLoadingContext) => { 1583 this.state = context.state; 1584 this.currentNotifySequence = context.currentNotifySequence; 1585 }, this.config) 1586 } 1587 .width('45%') 1588 .height('100%') 1589 .margin({ left: '5%' }) 1590 .onDragSpringLoading((context: SpringLoadingContext) => { 1591 this.state = context.state; 1592 this.currentNotifySequence = context.currentNotifySequence; 1593 }, this.config) 1594 .id("column") 1595 .backgroundColor(Color.Grey) 1596 } 1597 .height('100%') 1598 } 1599} 1600``` 1601 1602 1603### 示例7（拖起方延迟提供数据） 1604 1605示例7展示了在onDragStart中调用setDataLoadParams延迟提供数据接口，并在onDrop中调用startDataLoading异步获取数据接口。 1606 1607```ts 1608import { unifiedDataChannel, uniformDataStruct, uniformTypeDescriptor } from '@kit.ArkData'; 1609import { fileUri, fileIo as fs } from '@kit.CoreFileKit'; 1610import { common } from '@kit.AbilityKit'; 1611 1612@Entry 1613@Component 1614struct VideoExample { 1615 @State uri: string = ""; 1616 @State blockArr: string[] = []; 1617 uiContext = this.getUIContext(); 1618 udKey: string = ''; 1619 1620 build() { 1621 Column() { 1622 Text('video拖拽') 1623 .fontSize('30dp') 1624 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) { 1625 Video({ src: $rawfile('test1.mp4'), controller: new VideoController() }) 1626 .width(200) 1627 .height(200) 1628 .border({ width: 1 }) 1629 .draggable(true) 1630 .onDragStart((event: DragEvent) => { 1631 const context: Context | undefined = this.uiContext.getHostContext(); 1632 if (context) { 1633 let loadHandler: unifiedDataChannel.DataLoadHandler = (acceptableInfo) => { 1634 console.info('acceptableInfo recordCount', acceptableInfo?.recordCount); 1635 if (acceptableInfo?.types) { 1636 console.info('acceptableInfo types', Array.from(acceptableInfo.types)); 1637 } else { 1638 console.error('acceptableInfo types is undefined'); 1639 } 1640 let data = context.resourceManager.getRawFdSync('test1.mp4'); 1641 let filePath = context.filesDir + '/test1.mp4'; 1642 let file: fs.File = null!; 1643 try { 1644 file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE); 1645 let bufferSize = data.length as number; 1646 let buf = new ArrayBuffer(bufferSize); 1647 fs.readSync(data.fd, buf, { offset: data.offset, length: bufferSize }); 1648 fs.writeSync(file.fd, buf, { offset: 0, length: bufferSize }); 1649 } catch (error) { 1650 console.error(`openSync errorCode: ${error.code}, errorMessage: ${error.message}`); 1651 } finally { 1652 fs.closeSync(file.fd); 1653 } 1654 context.resourceManager.closeRawFdSync('test1.mp4') 1655 this.uri = fileUri.getUriFromPath(filePath); 1656 let videoMp: uniformDataStruct.FileUri = { 1657 uniformDataType: 'general.file-uri', 1658 oriUri: this.uri, 1659 fileType: 'general.video', 1660 } 1661 let unifiedRecord = new unifiedDataChannel.UnifiedRecord(); 1662 let unifiedData = new unifiedDataChannel.UnifiedData(); 1663 unifiedRecord.addEntry(uniformTypeDescriptor.UniformDataType.FILE_URI, videoMp); 1664 unifiedData.addRecord(unifiedRecord); 1665 return unifiedData; 1666 } 1667 (event as DragEvent).setDataLoadParams({ 1668 loadHandler: loadHandler, 1669 dataLoadInfo: { types: new Set([uniformTypeDescriptor.UniformDataType.FILE_URI]), recordCount: 1 } 1670 }); 1671 } 1672 }) 1673 } 1674 .margin({ bottom: 20 }) 1675 1676 Row() { 1677 Column() { 1678 Text('可释放区域') 1679 .fontSize('15dp') 1680 .height('10%') 1681 List() { 1682 ForEach(this.blockArr, (item: string, index) => { 1683 ListItem() { 1684 Video({ src: item, controller: new VideoController() }) 1685 .width(100) 1686 .height(100) 1687 .border({ width: 1 }) 1688 } 1689 .margin({ left: 30, top: 30 }) 1690 }, (item: string) => item) 1691 } 1692 .border({ width: 1 }) 1693 .height('90%') 1694 .width('100%') 1695 .onDrop((event: DragEvent, extraParams?: string) => { 1696 let context = this.uiContext.getHostContext() as common.UIAbilityContext; 1697 let pathDir: string = context.distributedFilesDir; 1698 let destUri = fileUri.getUriFromPath(pathDir); 1699 let progressListener: unifiedDataChannel.DataProgressListener = 1700 (progress: unifiedDataChannel.ProgressInfo, dragData: UnifiedData | null) => { 1701 if (dragData != null) { 1702 let arr: Array<unifiedDataChannel.UnifiedRecord> = dragData.getRecords(); 1703 if (arr.length > 0) { 1704 if (arr[0].getType() === uniformTypeDescriptor.UniformDataType.VIDEO) { 1705 this.blockArr.splice(JSON.parse(extraParams as string).insertIndex, 0, this.uri); 1706 } 1707 } else { 1708 console.info('dragData arr is null'); 1709 } 1710 } else { 1711 console.info('dragData is undefined'); 1712 } 1713 console.info(`percentage: ${progress.progress}`); 1714 }; 1715 let info: unifiedDataChannel.DataLoadInfo = 1716 { types: new Set([uniformTypeDescriptor.UniformDataType.VIDEO]), recordCount: 100 } 1717 let options: DataSyncOptions = { 1718 destUri: destUri, 1719 fileConflictOptions: unifiedDataChannel.FileConflictOptions.OVERWRITE, 1720 progressIndicator: unifiedDataChannel.ProgressIndicator.DEFAULT, 1721 dataProgressListener: progressListener, 1722 acceptableInfo: info, 1723 } 1724 try { 1725 this.udKey = (event as DragEvent).startDataLoading(options); 1726 console.info('udKey: ', this.udKey); 1727 } catch (e) { 1728 console.error(`startDataLoading errorCode: ${e.code}, errorMessage: ${e.message}`); 1729 } 1730 }, { disableDataPrefetch: true }) 1731 } 1732 .height("50%") 1733 .width("90%") 1734 .border({ width: 1 }) 1735 } 1736 1737 Button('取消数据传输') 1738 .onClick(() => { 1739 try { 1740 this.getUIContext().getDragController().cancelDataLoading(this.udKey); 1741 } catch (e) { 1742 console.error(`cancelDataLoading errorCode: ${e.code}, errorMessage: ${e.message}`); 1743 } 1744 }) 1745 .margin({ top: 10 }) 1746 }.width('100%') 1747 } 1748} 1749``` 1750
