diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 7bb1d206accb870f151925a32a91c969adfc7ea6..b590683adc555602e011538f63e37761ce76b85b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -40,6 +40,7 @@ - [分布式迁移标识](ts-universal-attributes-restoreId.md) - [前景色设置](ts-universal-attributes-foreground-color.md) - [点击回弹](ts-universal-attributes-click-effect.md) + - [拖拽控制](ts-universal-attributes-drag-drop.md) - 触摸交互控制 - [触摸热区设置](ts-universal-attributes-touch-target.md) - [触摸测试控制](ts-universal-attributes-hit-test-behavior.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/dragImage.gif b/zh-cn/application-dev/reference/arkui-ts/figures/dragImage.gif new file mode 100644 index 0000000000000000000000000000000000000000..1648465415bd1a9e85c23dcdb58767669f99b968 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/dragImage.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-drag-drop.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-drag-drop.md new file mode 100644 index 0000000000000000000000000000000000000000..6ec0f758243722986097550fb497502e2a57b056 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-drag-drop.md @@ -0,0 +1,157 @@ +# 拖拽控制 + +设置组件是否可以响应拖拽事件。 + +> **说明：** +> +> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> +> 支持拖拽控制的组件： +> +>[Text](ts-basic-components-text.md)、[Image](ts-basic-components-image.md)、[Video](ts-media-components-video.md)、[List](ts-container-list.md)、 +[Grid](ts-container-grid.md)。 + + +## 属性 + +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| allowDrop | Array\ | 设置该组件上允许落入的数据类型。
默认值：空
| +| draggable | boolean | 设置该组件是否允许进行拖拽。
默认值：false
| + + +## 示例 + +```ts +// xxx.ets +import UDMF from '@ohos.data.UDMF'; +@Entry +@Component +struct ImageExample { + @State uri: string = "" + @State AblockArr: string[] = [] + @State BblockArr: string[] = [] + @State AVisible: Visibility = Visibility.Visible + @State dragSuccess :Boolean = false + + @Builder pixelMapBuilder() { + Column() { + Column() + .width(100) + .height(100) + .borderRadius(10) + .backgroundColor(Color.Yellow) + } + } + + build() { + Column() { + Text('Image拖拽') + .fontSize('30dp') + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) { + Image($r('app.media.1')) + .width(100) + .height(100) + .border({ width: 1 }) + .visibility(this.AVisible) + .draggable(true) + .onDragStart((event: DragEvent, extraParams: string) => { + let image = new UDMF.Image(); + let unifiedData = new UDMF.UnifiedData(image); + event.setData(unifiedData); + return this.pixelMapBuilder() + }) + .onDragEnd((event: DragEvent) => { + let ret = event.getResult(); + if(ret == 0) { + console.log("enter ret == 0") + this.AVisible = Visibility.Hidden; + } else { + console.log("enter ret != 0") + this.AVisible = Visibility.Visible; + } + }) + } + .margin({ bottom: 20 }) + Row() { + Column(){ + Text('不允许释放区域(显示不允许角标但可以释放)') + .fontSize('15dp') + .height('10%') + List(){ + ForEach(this.AblockArr, (item, index) => { + ListItem() { + Image(item) + .width(100) + .height(100) + .border({width: 1}) + } + .margin({ left: 30 , top : 30}) + }, item => item) + } + .height('90%') + .width('100%') + .allowDrop(["File.Media.Text", "File.Media.Image"]) + .onDrop((event: DragEvent, extraParams: string) => { + let jsonString = JSON.parse(extraParams); + this.uri = jsonString.extraInfo; + this.AblockArr.splice(jsonString.insertIndex, 0, this.uri); + console.log("ondrop not udmf data"); + }) + .border({width: 1}) + } + .height("50%") + .width("45%") + .border({ width: 1 }) + .margin({ left: 12 }) + Column(){ + Text('可释放区域') + .fontSize('15dp') + .height('10%') + List(){ + ForEach(this.BblockArr, (item, index) => { + ListItem() { + Image(item) + .width(100) + .height(100) + .border({width: 1}) + } + .margin({ left: 30 , top : 30}) + }, item => item) + } + .border({width: 1}) + .height('90%') + .width('100%') + .allowDrop(["File.Media.Image"]) + .onDrop((event: DragEvent, extraParams: string) => { + console.log("enter onDrop") + let dragData = event.getData(); + let summary = event.getSummary(); + if(dragData != undefined) { + let arr = dragData.getRecords(); + if(arr.length > 0) { + let image = (arr[0]); + this.uri = image.imageUri; + let jsonString = JSON.parse(extraParams); + this.BblockArr.splice(jsonString.insertIndex, 0, this.uri); + } else { + console.log(`dragData arr is null`) + } + } else { + console.log(`dragData is undefined`) + } + console.log("ondrop udmf data"); + this.dragSuccess = true + }) + } + .height("50%") + .width("45%") + .border({ width: 1 }) + .margin({ left: 12 }) + } + }.width('100%') + } +} +``` + +![dragImage.gif](figures/dragImage.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md index 733e49cde195026da3d3ffb7c677c22dfac61704..4f7248ffbadd0023a963bab740dfe0329ade76a1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md @@ -6,13 +6,6 @@ > > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 属性 - -拖拽事件相关组件除支持[通用属性](ts-universal-attributes-size.md)外，支持绑定以下属性： -| 名称 | 参数类型 | 描述 | -| -------- | -------- | -------- | -| allowDrop10+ | Array\ | 设置该组件上允许落入的数据类型。
默认值：空
| -| draggable10+ | boolean | 设置该组件是否允许进行拖拽。
默认值：false
| ## 事件 | 名称 | 支持冒泡 | 功能描述 |