鸿蒙开发之拖拽事件

一、拖拽涉及的方法

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)
    }
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/296243.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

backtrader框架初探,轻松跑通策略并策略分析

网上有很多backtrader的文章&#xff0c;并有些将其与vnpy做比较&#xff0c;经过安装后发现&#xff0c;还是backtrader教程简单。 1、前期准备 # 安装akshare免费行情源 pip install akshare -i http://mirrors.aliyun.com/pypi/simple/ --trusted-hostmirrors.aliyun.com …

前端--基础 常用标签 - ( 内部链接,空链接,下载链接,网页元素连接)

链接分类 &#xff1a; 外部链接 内部链接 空链接 下载链接 网页元素链接 内部链接 &#xff1a; 即 网站内部页面之间的相互链接&#xff0c;直接点击 链接内部页面名称即可 所谓内部链接&#xff0c;就是在同一个网站里面&#xff0c;有许多链接&#xff0c;当你在 a…

Scrum的工件

我们采用了Scrum进行开发方面的管理&#xff0c;那么所有的计划和工作都应该是透明的&#xff0c;这给了我们检查这些东西的机会&#xff0c;以便能够即时做出调整来适应即将发生的变化。 那么Scrum为我们设计了一些工件帮助我们检查我们的工作和计划&#xff0c;每个工件都有…

数据结构入门到入土——链表(1)

目录 一&#xff0c;顺序表表/ArrayList的缺陷 二&#xff0c;链表 三&#xff0c;链表的实现 四&#xff0c;与链表有关的题目练习&#xff08;1&#xff09; 1.删除链表中等于给定值 val 的所有节点 2.反转一个单链表 3.给定一个带有头结点 head 的非空单链表&#xf…

机器视觉系统选型-环境配置:报错序列不包含任何元素 的解决方法

描述 环境&#xff1a;VM4.0.0VS2015 及以上 现象&#xff1a;配置环境后&#xff0c;获取线线测量模块结果&#xff0c;报错“序列不包含任何元素”。如下图所示&#xff1a; 解答 将“\VisionMaster4.0.0\Development\V4.0.0 \ComControls\bin\x64”下整体重新拷贝。

Python join()方法:合并字符串及 dir()和help()帮助函数

Python dir()和help()帮助函数 join() 方法也是非常重要的字符串方法&#xff0c;它是 split() 方法的逆方法&#xff0c;用来将列表&#xff08;或元组&#xff09;中包含的多个字符串连接成一个字符串。 使用 join() 方法合并字符串时&#xff0c;它会将列表&#xff08;或…

深入浅出 Zookeeper 中的 ZAB 协议

本文主要内容如下&#xff1a; ZAB 协议的全称是 Zookeeper Atomic Broadcase&#xff0c;原子广播协议。 作用&#xff1a;通过这个 ZAB 协议可以进行集群间主备节点的数据同步&#xff0c;保证数据的一致性。 在讲解 ZAB 协议之前&#xff0c;我们必须要了解 Zookeeper 的各…

Grounding 模型 + SAM 报错

引入 Grounding 目标检测模型串联 SAM 从而实现实例分割任务&#xff0c;目前支持 Grounding DINO 和 GLIP 参考教程 MMDetection-SAM 如果是 Grounding DINO 则安装如下依赖即可 cd playground pip install githttps://github.com/facebookresearch/segment-anything.git pip…

uni-app 前后端调用实例 基于Springboot 上拉分页实现

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…

java spring mvc 初探 web搭建过程详解

提前准备安装tomcat 设备:mac 第一步:下载 进入官网下载压缩包 注意:如果jdk版本是1.8,则tomcat需要v8才行,否则会报错 https://tomcat.apache.org/ 第二步:解压 解压后路径 /Users/you/Library/tomcat/apache-tomcat-8.5.73 进入此目录 修改配置 code setclasspath.…

Java SE面试

1.什么是 Java&#xff1f; Java 是一门面向对象的编程语言&#xff0c;不仅吸收了 C语言的各种优点&#xff0c;还摒弃了 C里难以理解的多继承、指针等概念&#xff0c;因此 Java 语言具有功能强大和简单易用两个特征。Java 语言作为静态面向对象编程语言的优秀代表&#xff…

C+语言的新特性

总是期待学习别人做好了的东西&#xff0c;是否也是一种懒惰呢&#xff1f; C语言是一门想象中的语言&#xff0c;它介于C和C之间。新的研究表明&#xff0c;C语言不支持某些特性&#xff0c;而C过于复杂。于是&#xff0c;便有了C语言&#xff0c;它的新特性如下&#xff1a; …

【已解决】js定义对象属性是.如何访问

当变量没有length属性的时候&#xff0c;可能是个对象变量&#xff0c;当有键值对的时候就可能是个对象&#xff0c;读者都知道的是&#xff0c;用typeof(变量)可以查看属性&#xff0c;今天本文解决的问题是如果js定义对象中属性是"点"如何访问 问题再现 var a {…

【Linux软件包管理器】yum详解

目录 1、什么是软件包 2、yum的操作 1&#xff09;yum源 2&#xff09;三板斧 ① yum list ② yum install [软键名] ③ yum remove [软件名] 1、什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了,…

Dubbo入门介绍和实战

1. 引言 Dubbo是一款开源的高性能、轻量级的Java RPC&#xff08;远程过程调用&#xff09;框架&#xff0c;旨在解决分布式服务之间的通信问题。本文将介绍Dubbo的基础概念、核心特性以及使用场景&#xff0c;包括实际示例演示。 2. 什么是Dubbo&#xff1f; Dubbo是阿里巴…

Spring Boot依赖版本声明

链接 官网 Spring Boot文档官网&#xff1a;​​​​​​https://docs.spring.io/spring-boot/docs/https://docs.spring.io/spring-boot/docs/ Spring Boot 2.0.7.RELEASE Spring Boot 2.0.7.RELEASE reference相关&#xff1a;https://docs.spring.io/spring-boot/docs/2.…

实战|验证码突破思路

目录 一、暴力破解突破验证码 二、时间、次数突破验证码 三、回显突破验证码 四、绕过验证码方法介绍 一、暴力破解突破验证码 方法 有的验证码输入正确一次&#xff0c;在一定时间内不用再输入。 有的验证码输入正确一次&#xff0c;会在你session中设定一个值&#xff0…

DFA算法在敏感词过滤的应用

相信大家对于游戏里聊天框的以下内容已经不陌生了 "我***"“你真牛*”“你是不是傻*” 一个垃圾的游戏环境是非常影响玩游戏的心情的&#xff0c;看到这些&#xff0c;就知道游戏已经帮我们屏蔽掉了那些屏蔽字了&#xff0c;对于玩游戏而言&#xff0c;心里会好受很…

Raft no-op日志

no-op日志 为什么 Leader 不能提交之前任期的日志&#xff0c;只能通过提交自己任期的日志&#xff0c;从而间接提交之前任期的日志。 先按错误的情况&#xff0c;也就是 Leader 可以提交之前任期的日志。那么上述的流程&#xff1a; s1 是任期 2 的 Leader(仔细看&#xff0…

【Tomcat】在一台计算机上运行两个Tomcat服务

首先把Tomcat整个文件复制一份放在其他文件夹路径中 1.修改环境变量 添加环境变量在系统变量里面 “CATALINA_HOME” 指向一个路径 “CATALINA_HOME1” 指另一个Tomcat路径 2.修改startup里面的环境变量&#xff0c;全部修改 修改"D:\Java\apache-tomcat-8.5.45\bin&…
最新文章