• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Drag and Drop Control
2
3The drag and drop control attributes set whether a component can respond to drag events.
4
5> **NOTE**
6>
7> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8
9The ArkUI framework implements the drag and drop capability 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). To enable drag and drop for these components, you only need to set their **draggable** attribute to **true**.
10
11- The following component supports drag actions by default: **\<Search>**, **\<TextInput>**, **\<TextArea>**, **\<RichEditor>**, **\<Text>**, **\<Image>**, **\<FormComponent>**, **\<Hyperlink>**
12
13- The following component supports drop actions by default: **\<Search>**, **\<TextInput>**, **\<TextArea>**, **\<Video>**
14
15You can also define drag responses by implementing common drag events.
16
17To 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
20## Attributes
21
22| Name| Type| Description|
23| -------- | -------- | -------- |
24| allowDrop | Array\<[UniformDataType](../apis/js-apis-data-uniformTypeDescriptor.md#uniformdatatype)> | Type of data that can be dropped to the component.<br>Default value: empty<br>|
25| draggable | boolean | Whether the component is draggable.<br>Default value: **false**<br>|
26
27
28## Example
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 drag and drop')
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('Invalid drop target')
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 ('Valid drop target')
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![dragImage1.jpeg](figures/dragImage1.jpeg)
146![dragImage2.jpeg](figures/dragImage2.jpeg)
147![dragImage3.jpeg](figures/dragImage3.jpeg)
148