拖拽事件

2024-01-22 11:02 更新

拖拽事件指组件被长按后拖拽时触发的事件。

说明

从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

事件

名称

支持冒泡

功能描述

onDragStart(event: (event?: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo)

第一次拖拽此事件绑定的组件时,触发回调。

- event:拖拽事件信息,包括拖拽点坐标。

- extraParams:拖拽事件额外信息,详见extraParams说明。

返回值:当前跟手效果所拖拽的对象,用于显示拖拽时的提示组件。

长按150ms可触发拖拽事件。优先级:长按手势配置时间小于等于150ms时,长按手势优先触发,否则拖拽事件优先触发。

onDragEnter(event: (event?: DragEvent, extraParams?: string) => void)

拖拽进入组件范围内时,触发回调。

- event:拖拽事件信息,包括拖拽点坐标。

- extraParams:拖拽事件额外信息,详见extraParams说明。

当监听了onDrop事件时,此事件才有效。

onDragMove(event: (event?: DragEvent, extraParams?: string) => void)

拖拽在组件范围内移动时,触发回调。

- event:拖拽事件信息,包括拖拽点坐标。

- extraParams:拖拽事件额外信息,详见extraParams说明。

当监听了onDrop事件时,此事件才有效。

onDragLeave(event: (event?: DragEvent, extraParams?: string) => void)

拖拽离开组件范围内时,触发回调。

- event:拖拽事件信息,包括拖拽点坐标。

- extraParams:拖拽事件额外信息,详见extraParams说明。

当监听了onDrop事件时,此事件才有效。

onDrop(event: (event?: DragEvent, extraParams?: string) => void)

绑定此事件的组件可作为拖拽释放目标,当在本组件范围内停止拖拽行为时,触发回调。

- event:拖拽事件信息,包括拖拽点坐标。

- extraParams:拖拽事件额外信息,详见extraParams说明。

DragItemInfo说明

名称

类型

必填

描述

pixelMap

PixelMap

设置拖拽过程中显示的图片。

builder

CustomBuilder

拖拽过程中显示自定义组件,如果设置了pixelMap,则忽略此值。

extraInfo

string

拖拽项的描述。

extraParams说明

用于返回组件在拖拽中需要用到的额外信息。

extraParams是Json对象转换的string字符串,可以通过Json.parse转换的Json对象获取如下属性。

名称

类型

描述

selectedIndex

number

当拖拽事件设在父容器的子元素时,selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素,selectedIndex从0开始。

仅在ListItem组件的拖拽事件中生效。

insertIndex

number

当前拖拽元素在List组件中放下时,insertIndex表示被拖拽元素插入该组件的第insertIndex个位置,insertIndex从0开始。

仅在List组件的拖拽事件中生效。

DragEvent说明

名称

类型

描述

getX()

number

当前拖拽点相对于屏幕左上角的x轴坐标,单位为vp。

getY()

number

当前拖拽点相对于屏幕左上角的y轴坐标,单位为vp。

示例

示例1

  1. @Observed
  2. class ClassA {
  3. public name: string
  4. public bol: boolean
  5. constructor(name: string, bol: boolean) {
  6. this.name = name
  7. this.bol = bol
  8. }
  9. }
  10. @Extend(Text) function textStyle() {
  11. .width('25%')
  12. .height(35)
  13. .fontSize(16)
  14. .textAlign(TextAlign.Center)
  15. .backgroundColor(0xAFEEEE)
  16. }
  17. @Entry
  18. @Component
  19. struct DragExample {
  20. @State arr: ClassA[] = [new ClassA('A', true), new ClassA('B', true), new ClassA('C', true)]
  21. @State dragIndex: number = 0
  22. changeIndex(index1: number, index2: number) { // 交换数组位置
  23. [this.arr[index1], this.arr[index2]] = [this.arr[index2], this.arr[index1]];
  24. }
  25. build() {
  26. Column() {
  27. Row({ space: 15 }) {
  28. List({ space: 20 }) {
  29. ForEach(this.arr, (item, index) => {
  30. ListItem() {
  31. Column() {
  32. Child({ a: this.arr[index] })
  33. }
  34. .onTouch((event: TouchEvent) => {
  35. if (event.type === TouchType.Down) {
  36. this.dragIndex = index // 获取当前拖拽子组件的索引
  37. console.info('onTouch' + this.dragIndex)
  38. }
  39. })
  40. }
  41. })
  42. }
  43. .listDirection(Axis.Horizontal)
  44. .onDrop((event: DragEvent, extraParams: string) => { // 绑定此事件的组件可作为拖拽释放目标,当在本组件范围内停止拖拽行为时,触发回调。
  45. let jsonString = JSON.parse(extraParams);
  46. this.changeIndex(this.dragIndex, jsonString.insertIndex)
  47. })
  48. }.padding({ top: 10, bottom: 10 }).margin(10)
  49. }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
  50. }
  51. }
  52. @Component
  53. struct Child {
  54. @ObjectLink a: ClassA
  55. @Builder pixelMapBuilder() {
  56. Column() {
  57. Text(this.a.name)
  58. .width('50%')
  59. .height(60)
  60. .fontSize(16)
  61. .borderRadius(10)
  62. .textAlign(TextAlign.Center)
  63. .backgroundColor(Color.Yellow)
  64. }
  65. }
  66. build() {
  67. Column() {
  68. Text(this.a.name)
  69. .textStyle()
  70. .visibility(this.a.bol ? Visibility.Visible : Visibility.None)
  71. .onDragStart(() => { // 第一次拖拽此事件绑定的组件时,触发回调。
  72. this.a.bol = false // 控制显隐
  73. return this.pixelMapBuilder() // 设置拖拽过程中显示的图片。
  74. })
  75. .onTouch((event: TouchEvent) => {
  76. if (event.type === TouchType.Up) {
  77. this.a.bol = true
  78. }
  79. })
  80. Text('')
  81. .width('25%')
  82. .height(35)
  83. .fontSize(16)
  84. .textAlign(TextAlign.Center)
  85. .border({ width: 5, color: 'red' })
  86. .visibility(!this.a.bol ? Visibility.Visible : Visibility.None)
  87. }
  88. }
  89. }

示例2

  1. // xxx.ets
  2. @Extend(Text) function textStyle () {
  3. .width('25%')
  4. .height(35)
  5. .fontSize(16)
  6. .textAlign(TextAlign.Center)
  7. .backgroundColor(0xAFEEEE)
  8. }
  9. @Entry
  10. @Component
  11. struct DragExample {
  12. @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
  13. @State text: string = ''
  14. @State bool: boolean = true
  15. @State eventType: string = ''
  16. @State appleVisible: Visibility = Visibility.Visible
  17. @State orangeVisible: Visibility = Visibility.Visible
  18. @State bananaVisible: Visibility = Visibility.Visible
  19. private dragList: string[] = ['apple', 'orange', 'banana']
  20. @State fruitVisible: Visibility[] = [Visibility.Visible, Visibility.Visible, Visibility.Visible]
  21. @State idx: number = 0
  22. // 自定义拖拽过程中显示的内容
  23. @Builder pixelMapBuilder() {
  24. Column() {
  25. Text(this.text)
  26. .width('50%')
  27. .height(60)
  28. .fontSize(16)
  29. .borderRadius(10)
  30. .textAlign(TextAlign.Center)
  31. .backgroundColor(Color.Yellow)
  32. }
  33. }
  34. build() {
  35. Column() {
  36. Text('There are three Text elements here')
  37. .fontSize(12)
  38. .fontColor(0xCCCCCC)
  39. .width('90%')
  40. .textAlign(TextAlign.Start)
  41. .margin(5)
  42. Row({ space: 15 }) {
  43. ForEach(this.dragList, (item, index) => {
  44. Text(item)
  45. .textStyle()
  46. .visibility(this.fruitVisible[index])
  47. .onDragStart(() => {
  48. this.bool = true
  49. this.text = item
  50. this.fruitVisible[index] = Visibility.None
  51. return this.pixelMapBuilder
  52. })
  53. .onTouch((event: TouchEvent) => {
  54. if (event.type === TouchType.Down) {
  55. this.eventType = 'Down'
  56. this.idx = index
  57. }
  58. if (event.type === TouchType.Up) {
  59. this.eventType = 'Up'
  60. if (this.bool) {
  61. this.fruitVisible[index] = Visibility.Visible
  62. }
  63. }
  64. })
  65. })
  66. }.padding({ top: 10, bottom: 10 }).margin(10)
  67. Text('This is a List element')
  68. .fontSize(12)
  69. .fontColor(0xCCCCCC)
  70. .width('90%')
  71. .textAlign(TextAlign.Start)
  72. .margin(15)
  73. List({ space: 20 }) {
  74. ForEach(this.numbers, (item) => {
  75. ListItem() {
  76. Text(item)
  77. .width('100%')
  78. .height(80)
  79. .fontSize(16)
  80. .borderRadius(10)
  81. .textAlign(TextAlign.Center)
  82. .backgroundColor(0xAFEEEE)
  83. }
  84. }, item => item)
  85. }
  86. .editMode(true)
  87. .height('50%')
  88. .width('90%')
  89. .border({ width: 1 })
  90. .padding(15)
  91. .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
  92. .onDragEnter((event: DragEvent, extraParams: string) => {
  93. console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
  94. })
  95. .onDragMove((event: DragEvent, extraParams: string) => {
  96. console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
  97. })
  98. .onDragLeave((event: DragEvent, extraParams: string) => {
  99. console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
  100. })
  101. .onDrop((event: DragEvent, extraParams: string) => {
  102. let jsonString = JSON.parse(extraParams);
  103. if (this.bool) {
  104. // 通过splice方法插入元素
  105. this.numbers.splice(jsonString.insertIndex, 0, this.text)
  106. this.bool = false
  107. }
  108. this.fruitVisible[this.idx] = Visibility.None
  109. })
  110. }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
  111. }
  112. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号