1# 拖拽事件 2 3拖拽事件指组件被长按后拖拽时触发的事件。 4 5> **说明：** 6> 7> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 事件 10 11| 名称 | 支持冒泡 | 功能描述 | 12| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | 13| onDragStart(event: (event?: [DragEvent](#dragevent说明), extraParams?: string) => [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo说明)) | 否 | 第一次拖拽此事件绑定的组件时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>返回值：当前跟手效果所拖拽的对象，用于显示拖拽时的提示组件。<br/>长按150ms可触发拖拽事件。优先级：长按手势配置时间小于等于150ms时，长按手势优先触发，否则拖拽事件优先触发。 | 14| onDragEnter(event: (event?: [DragEvent](#dragevent说明), extraParams?: string) => void) | 否 | 拖拽进入组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>当监听了onDrop事件时，此事件才有效。 | 15| onDragMove(event: (event?: [DragEvent](#dragevent说明), extraParams?: string) => void) | 否 | 拖拽在组件范围内移动时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>当监听了onDrop事件时，此事件才有效。 | 16| onDragLeave(event: (event?: [DragEvent](#dragevent说明), extraParams?: string) => void) | 否 | 拖拽离开组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>当监听了onDrop事件时，此事件才有效。 | 17| onDrop(event: (event?: [DragEvent](#dragevent说明), extraParams?: string) => void) | 否 | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。 | 18 19## DragItemInfo说明 20 21| 名称 | 类型 | 必填 | 描述 | 22| --------- | ---------------------------------------- | ---- | --------------------------------- | 23| pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | 设置拖拽过程中显示的图片。 | 24| builder | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 拖拽过程中显示自定义组件，如果设置了pixelMap，则忽略此值。 | 25| extraInfo | string | 否 | 拖拽项的描述。 | 26 27 28## extraParams说明 29 30 用于返回组件在拖拽中需要用到的额外信息。 31 32 extraParams是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。 33 34| 名称 | 类型 | 描述 | 35| ------------- | ------ | ---------------------------------------- | 36| selectedIndex | number | 当拖拽事件设在父容器的子元素时，selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素，selectedIndex从0开始。<br/>仅在ListItem组件的拖拽事件中生效。 | 37| insertIndex | number | 当前拖拽元素在List组件中放下时，insertIndex表示被拖拽元素插入该组件的第insertIndex个位置，insertIndex从0开始。<br/>仅在List组件的拖拽事件中生效。 | 38 39## DragEvent说明 40 41| 名称 | 类型 | 描述 | 42| ------ | ------ | ---------------- | 43| getX() | number | 当前拖拽点相对于屏幕左上角的x轴坐标，单位为vp。 | 44| getY() | number | 当前拖拽点相对于屏幕左上角的y轴坐标，单位为vp。 | 45 46## 示例 47 48```ts 49// xxx.ets 50@Extend(Text) function textStyle () { 51 .width('25%') 52 .height(35) 53 .fontSize(16) 54 .textAlign(TextAlign.Center) 55 .backgroundColor(0xAFEEEE) 56} 57 58@Entry 59@Component 60struct DragExample { 61 @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'] 62 @State text: string = '' 63 @State bool: boolean = true 64 @State eventType: string = '' 65 @State appleVisible: Visibility = Visibility.Visible 66 @State orangeVisible: Visibility = Visibility.Visible 67 @State bananaVisible: Visibility = Visibility.Visible 68 private dragList: string[] = ['apple', 'orange', 'banana'] 69 @State fruitVisible: Visibility[] = [Visibility.Visible, Visibility.Visible, Visibility.Visible] 70 @State idx: number = 0 71 72 // 自定义拖拽过程中显示的内容 73 @Builder pixelMapBuilder() { 74 Column() { 75 Text(this.text) 76 .width('50%') 77 .height(60) 78 .fontSize(16) 79 .borderRadius(10) 80 .textAlign(TextAlign.Center) 81 .backgroundColor(Color.Yellow) 82 } 83 } 84 85 build() { 86 Column() { 87 Text('There are three Text elements here') 88 .fontSize(12) 89 .fontColor(0xCCCCCC) 90 .width('90%') 91 .textAlign(TextAlign.Start) 92 .margin(5) 93 Row({ space: 15 }) { 94 ForEach(this.dragList, (item, index) => { 95 Text(item) 96 .textStyle() 97 .visibility(this.fruitVisible[index]) 98 .onDragStart(() => { 99 this.bool = true 100 this.text = item 101 this.fruitVisible[index] = Visibility.None 102 return this.pixelMapBuilder 103 }) 104 .onTouch((event: TouchEvent) => { 105 if (event.type === TouchType.Down) { 106 this.eventType = 'Down' 107 this.idx = index 108 } 109 if (event.type === TouchType.Up) { 110 this.eventType = 'Up' 111 if (this.bool) { 112 this.fruitVisible[index] = Visibility.Visible 113 } 114 } 115 }) 116 }) 117 }.padding({ top: 10, bottom: 10 }).margin(10) 118 119 Text('This is a List element') 120 .fontSize(12) 121 .fontColor(0xCCCCCC) 122 .width('90%') 123 .textAlign(TextAlign.Start) 124 .margin(15) 125 List({ space: 20 }) { 126 ForEach(this.numbers, (item) => { 127 ListItem() { 128 Text(item) 129 .width('100%') 130 .height(80) 131 .fontSize(16) 132 .borderRadius(10) 133 .textAlign(TextAlign.Center) 134 .backgroundColor(0xAFEEEE) 135 } 136 }, item => item) 137 } 138 .editMode(true) 139 .height('50%') 140 .width('90%') 141 .border({ width: 1 }) 142 .padding(15) 143 .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) 144 .onDragEnter((event: DragEvent, extraParams: string) => { 145 console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()) 146 }) 147 .onDragMove((event: DragEvent, extraParams: string) => { 148 console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()) 149 }) 150 .onDragLeave((event: DragEvent, extraParams: string) => { 151 console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()) 152 }) 153 .onDrop((event: DragEvent, extraParams: string) => { 154 let jsonString = JSON.parse(extraParams); 155 if (this.bool) { 156 // 通过splice方法插入元素 157 this.numbers.splice(jsonString.insertIndex, 0, this.text) 158 this.bool = false 159 } 160 this.fruitVisible[this.idx] = Visibility.None 161 }) 162 }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) 163 } 164} 165``` 166 167 168
