鸿蒙开发之拖拽事件

一、拖拽涉及的方法

复制代码
Text(this.message)
    .fontSize(50)
    .fontWeight(FontWeight.Bold)
    //拖拽开始
    .onDragStart((event: DragEvent) => {
      console.log('drag event onDragStart'+event.getX())
    })
    //拖拽进入组件范围,需要监听onDrop配合
    .onDragEnter((event: DragEvent) => {
      console.log('drag event onDragEnter'+event.getX())

    })
    //拖拽在组件范围内移动,需要监听onDrop配合
    .onDragMove((event: DragEvent) => {
      console.log('drag event onDragMove'+event.getX())

    })
    //拖拽离开组件范围,需要监听onDrop配合
    .onDragLeave((event: DragEvent) => {
      console.log('drag event onDragLeave'+event.getX())

    })
    //拖拽结束时触发
     .onDrop((event: DragEvent) => {
      console.log('drag event onDrop'+event.getX())

    })

需要特别注意的是:拖拽触发时间是长按150ms。如果组件上有长按手势,需要看长按手势设置的触发时间。当长按手势配置时间小于等于150ms时,长按手势优先触发,如果长按手势设置的时间大于150ms,那么拖拽事件优先触发。

二、Demo示例

复制代码
@Observed
class DragItem{
  title: string
  //是否在拖动中
  isDrag: boolean

  constructor(title: string, isDrag: boolean) {
    this.title = title
    this.isDrag = isDrag
  }
}

@Extend(Text) function dragItemTextStyle() {
  .fontColor(Color.White)
  .fontSize(40)
  .borderRadius(20)
  .borderWidth(3)
  .textAlign(TextAlign.Center)
  .width('25%')
  .height(55)
}

@Entry
@Component
struct OfficialDragPage {
  //记录拖动的index
  @State dragIndex: number = 0
  @State dataArray: Array<DragItem> = [
    new DragItem('A',false),
    new DragItem('B',false),
    new DragItem('C',false)
  ]

  build() {
      Column() {
        List({space:20}) {
          ForEach(this.dataArray,(item: DragItem,index) => {
            ListItem() {
              Column() {
                Childitem({item:this.dataArray[index]})
              }
              .onTouch((touch: TouchEvent) => {
                  if (touch.type == TouchType.Down) {
                    this.dragIndex = index
                    item.isDrag = true
                  }
                })
            }
          })
        }
        .listDirection(Axis.Horizontal)
        .onDrop((event,extraParam: string) => {
          let jsonStr = JSON.parse(extraParam)
          this.dataArray[this.dragIndex].isDrag = false
          this.changeData(this.dragIndex,jsonStr.insertIndex)
        })
        .padding({top:20})
      }
      .width('100%')
      .height('100%')
  }

  changeData(fromIndex:number,toIndex:number) {
    [this.dataArray[fromIndex], this.dataArray[toIndex]] = [this.dataArray[toIndex], this.dataArray[fromIndex]]
  }
}

@Component
struct Childitem {

  @ObjectLink item: DragItem

  @Builder pixelMapBuilder() {
    Column() {
      Text(this.item.title)
        .width('40%')
        .height(60)
        .fontSize(46)
        .borderRadius(10)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Yellow)
    }
  }

  build() {
    Column() {
      Text(this.item.title)
        .backgroundColor( Color.Blue)
        .dragItemTextStyle()
        .visibility(this.item.isDrag ? Visibility.None : Visibility.Visible)
        .onDragStart(() => {
          return this.pixelMapBuilder()
        })

      Text()
        .dragItemTextStyle()
        .border({ width: 5, color: 'red' })
        .visibility(!this.item.isDrag ? Visibility.None : Visibility.Visible)
    }
  }
}
相关推荐
周胡杰13 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
迷曳15 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
NoirSeeker15 小时前
在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用(详细)
c++·windows·arkts·鸿蒙·交叉编译
迷曳2 天前
17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
前端·harmonyos·鸿蒙
冰天糖葫芦3 天前
鸿蒙Next原生应用开发AES加解密
鸿蒙·aes加解密
SuperHeroWu74 天前
【HarmonyOS】元服务入门详解 (一)
华为·harmonyos·鸿蒙·元服务·卡片·免安装
SuperHeroWu74 天前
【HarmonyOS】元服务概念详解
华为·harmonyos·鸿蒙·概念·元服务·详解
weixin_541299944 天前
鸿蒙应用开发: 鸿蒙项目中使用私有 npm 插件的完整流程
华为·npm·harmonyos·鸿蒙
HarmonyOS小助手9 天前
从航旅纵横到东南亚Grab:鸿蒙生态的“星辰大海”,由开发者共绘
harmonyos·鸿蒙·鸿蒙生态
逻极9 天前
HarmonyOS从入门到精通:自定义组件开发指南(二):组件属性与参数传递
华为·harmonyos·arkts·鸿蒙·自定义组件