鸿蒙开发之拖拽事件

一、拖拽涉及的方法

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)
    }
  }
}
相关推荐
鸿蒙自习室12 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu715 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
郝晨妤1 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙
Peace*2 天前
HarmonyOs鸿蒙开发实战(16)=>沉浸式效果第一种方案一窗口全屏布局方案
harmonyos·鸿蒙·鸿蒙系统
遇到困难睡大觉哈哈2 天前
ArkTS组件结构和状态管理
鸿蒙
ChinaDragonDreamer2 天前
HarmonyOS:UIAbility组件间交互(设备内)
开发语言·harmonyos·鸿蒙
ChinaDragonDreamer3 天前
HarmonyOS:使用常用组件构建页面
开发语言·harmonyos·鸿蒙
鸿蒙自习室4 天前
鸿蒙动画开发07——粒子动画
ui·华为·harmonyos·鸿蒙
少恭写代码4 天前
Taro首个支持鸿蒙的 UI 库,同时还兼容 React Native、小程序、H5
react native·鸿蒙·taro·duxapp
zhongcx015 天前
鸿蒙NEXT开发案例:计数器
华为·harmonyos·鸿蒙·鸿蒙next