1# 拖拽控制 2 3设置组件是否可以响应拖拽事件。 4 5> **说明：** 6> 7> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9ArkUI框架对以下组件实现了默认的拖拽能力，支持对数据的拖出或拖入响应，开发者只需要将这些组件的draggale属性设置为true，即可使用默认拖拽能力。 10 11- 默认支持拖出能力的组件（可从组件上拖出数据）：Search、TextInput、TextArea、RichEditor、Text、Image、FormComponent、Hyperlink 12 13- 默认支持拖入能力的组件（目标组件可响应拖入数据）：Search、TextInput、TextArea、Video 14 15开发者也可以通过实现通用拖拽事件来自定义拖拽响应。 16 17其他组件需要开发者将draggable属性设置为true，并在onDragStart等接口中实现数据传输相关内容，才能正确处理拖拽。 18 19 20## 属性 21 22| 名称 | 参数类型 | 描述 | 23| -------- | -------- | -------- | 24| allowDrop | Array\<[UniformDataType](../apis/js-apis-data-uniformTypeDescriptor.md#uniformdatatype)> | 设置该组件上允许落入的数据类型。<br/>默认值：空<br/> | 25| draggable | boolean | 设置该组件是否允许进行拖拽。<br/>默认值：false<br/> | 26 27 28## 示例 29 30```ts 31// xxx.ets 32import UDC from '@ohos.data.unifiedDataChannel'; 33import UTD from '@ohos.data.uniformTypeDescriptor'; 34 35@Entry 36@Component 37struct ImageExample { 38 @State uri: string = "" 39 @State AblockArr: string[] = [] 40 @State BblockArr: string[] = [] 41 @State AVisible: Visibility = Visibility.Visible 42 @State dragSuccess :Boolean = false 43 44 build() { 45 Column() { 46 Text('Image拖拽') 47 .fontSize('30dp') 48 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) { 49 Image($r('app.media.icon')) 50 .width(100) 51 .height(100) 52 .border({ width: 1 }) 53 .visibility(this.AVisible) 54 .draggable(true) 55 .onDragEnd((event: DragEvent) => { 56 let ret = event.getResult(); 57 if(ret == 0) { 58 console.log("enter ret == 0") 59 this.AVisible = Visibility.Hidden; 60 } else { 61 console.log("enter ret != 0") 62 this.AVisible = Visibility.Visible; 63 } 64 }) 65 } 66 .margin({ bottom: 20 }) 67 Row() { 68 Column(){ 69 Text('不允许释放区域(显示不允许角标但可以释放)') 70 .fontSize('15dp') 71 .height('10%') 72 List(){ 73 ForEach(this.AblockArr, (item:string, index) => { 74 ListItem() { 75 Image(item) 76 .width(100) 77 .height(100) 78 .border({width: 1}) 79 } 80 .margin({ left: 30 , top : 30}) 81 }, (item:string) => item) 82 } 83 .height('90%') 84 .width('100%') 85 .allowDrop([UTD.UniformDataType.TEXT]) 86 .onDrop((event?: DragEvent, extraParams?: string) => { 87 this.uri = JSON.parse(extraParams as string).extraInfo; 88 this.AblockArr.splice(JSON.parse(extraParams as string).insertIndex, 0, this.uri); 89 console.log("ondrop not udmf data"); 90 }) 91 .border({width: 1}) 92 } 93 .height("50%") 94 .width("45%") 95 .border({ width: 1 }) 96 .margin({ left: 12 }) 97 Column(){ 98 Text('可释放区域') 99 .fontSize('15dp') 100 .height('10%') 101 List(){ 102 ForEach(this.BblockArr, (item:string, index) => { 103 ListItem() { 104 Image(item) 105 .width(100) 106 .height(100) 107 .border({width: 1}) 108 } 109 .margin({ left: 30 , top : 30}) 110 }, (item:string) => item) 111 } 112 .border({width: 1}) 113 .height('90%') 114 .width('100%') 115 .allowDrop([UTD.UniformDataType.IMAGE]) 116 .onDrop((event?: DragEvent, extraParams?: string) => { 117 console.log("enter onDrop") 118 let dragData:UnifiedData = (event as DragEvent).getData() as UnifiedData; 119 if(dragData != undefined) { 120 let arr:Array<UDC.UnifiedRecord> = dragData.getRecords(); 121 if(arr.length > 0) { 122 let image = arr[0] as UDC.Image; 123 this.uri = image.imageUri; 124 this.BblockArr.splice(JSON.parse(extraParams as string).insertIndex, 0, this.uri); 125 } else { 126 console.log(`dragData arr is null`) 127 } 128 } else { 129 console.log(`dragData is undefined`) 130 } 131 console.log("ondrop udmf data"); 132 this.dragSuccess = true 133 }) 134 } 135 .height("50%") 136 .width("45%") 137 .border({ width: 1 }) 138 .margin({ left: 12 }) 139 } 140 }.width('100%') 141 } 142} 143``` 144 145 146
