鸿蒙开发之拖拽事件

一、拖拽涉及的方法

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: booleanconstructor(title: string, isDrag: boolean) {this.title = titlethis.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 = indexitem.isDrag = true}})}})}.listDirection(Axis.Horizontal).onDrop((event,extraParam: string) => {let jsonStr = JSON.parse(extraParam)this.dataArray[this.dragIndex].isDrag = falsethis.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.mzph.cn/news/601638.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MongoDB】MongoDB查询语句find的使用,和提高查询速度的游标的使用,非常详细!!!

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;MongoDB数据库 &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继续前…

联合体类型和枚举类型

联合体 联合体类型的声明 像结构体⼀样&#xff0c;联合体也是由⼀个或者多个成员构成&#xff0c;这些成员可以不同的类型。 联合体的特点是所有成员共⽤同⼀块内存空间。所以联合体也叫&#xff1a;共⽤体。 所以给联合体其中⼀个成员赋值&#xff0c;其他成员的值也跟着…

Postman 并发测试入门指南:如何模拟用户并发请求?

背景介绍 最近&#xff0c;我们发起了一个在线图书管理系统的项目。我负责的一个关键模块包括三个主要后台接口&#xff1a; 实现对books数据的检索。实施对likes数据的获取。通过collections端点访问数据。 应对高流量的挑战 在设计并部署接口时&#xff0c;我们不可避免地…

Vue3集成scss实现清除浏览器默认样式

1.首先去npm官网找到对应的reset.scss文件&#xff0c;复制内容在本地src下style建一个一模一样的文件&#xff0c;内容复制进去npm | Home 2.在style文件夹下再建一个index.scss文件&#xff0c;在它里边引入刚刚建好的reset.scss文件&#xff0c;如下 import ./reset.scss; …

我用 midjourney 创作的那些好看的图片

下面这些是个人的midjourney v5的关键词&#xff0c;各种类型都有 抽象画 One piece of original artwork from 1998 , in the style of confucian ideology, pop art-inspired collages, recycled material murals, meticulous military scenes, close-up intensity, grocer…

基于OpenCV的透视变换

基础概念 透视变换(Perspective Transformation)是仿射变换的一种非线性扩展,是将图片投影到一个新的视平面(Viewing Plane)&#xff0c;也称作投影映射(Projective Mapping)。 原理&#xff1a;将二维的图片投影到一个三维视平面上&#xff0c;然后再转换到二维坐标下&#…

如何查询 ESP-IDF 中使用的第三方组件的版本?

引言 随着开源的日益普及&#xff0c;开源包的漏洞数量也在增加。这会给公司带来多种风险和挑战&#xff0c;比如&#xff1a; 库版本更新导致的兼容性问题库许可证违反引发潜在法律纠纷库漏洞被利用导致被攻击&#xff08;含供应链攻击&#xff09; 越来越多的用户希望使用…

八大算法排序@快速排序、递归版本一(C语言版本)

目录 快速排序版本一概念算法思想一二三 快排步骤代码实现时间复杂度空间复杂度特性总结 快速排序版本一 概念 快速排序&#xff08;Quicksort&#xff09;是一种高效的排序算法&#xff0c;它是由英国计算机科学家 Tony Hoare 在1960年提出的。快速排序是基于分治&#xff08…

C++中string的库函数

山再高&#xff0c;往上攀&#xff0c;总能登顶&#xff01; 路再长&#xff0c;走下去&#xff0c;定能到达&#xff01; &#x1f3a5;烟雨长虹&#xff0c;孤鹜齐飞的个人主页 &#x1f525;个人专栏c 期待小伙伴们的支持与关注&#xff01;&#xff01;&#xff01; 目录 前…

Pandas DataFrame中将True/False映射到1/0

在本文中&#xff0c;我们将看到如何在Pandas DataFrame中将True/False映射到1/0。True/False到1/0的转换在执行计算时至关重要&#xff0c;并且可以轻松分析数据。 1. replace方法 在这个例子中&#xff0c;我们使用Pandas replace()方法将True/False映射到1/0。在这里&…

【Spark精讲】记一个SparkSQL引擎层面的优化:SortMergeJoinExec

SparkSQL的Join执行流程 如下图所示&#xff0c;在分析不同类型的Join具体执行之前&#xff0c;先介绍Join执行的基本框架&#xff0c;框架中的一些概念和定义是在不同的SQL场景中使用的。 在Spark SQL中Join的实现都基于一个基本的流程&#xff0c;根据角色的不同&#xff0…

信息论与编码期末复习——计算题+基础汇总(二)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;V…

centos安装tesseract

1.安装相关依赖 sudo yum install autoconf automake sudo yum install libjpeg-devel libpng-devel libtiff-devel zlib-devel 2.安装leptonica 下载 wget http://www.leptonica.org/source/leptonica-1.78.0.tar.gz 解压 tar -zxvf leptonica-1.78.0.tar.gz 安装 cd le…

【计算机毕业设计】SSM网上外卖订餐管理系统

项目介绍 该项目为前后台项目&#xff0c;分为普通用户与管理员两种角色&#xff0c;前台普通用户登录&#xff0c;后台管理员登录&#xff1b; 普通用户主要功能包括&#xff1a; 登录注册&#xff0c;查看商品&#xff0c;提交订单&#xff0c;然后留言&#xff0c;查看购物…

DS|静态查找

题目一&#xff1a;DS静态查找 -- 顺序查找 题目描述&#xff1a; 给出一个队列和要查找的数值&#xff0c;找出数值在队列中的位置&#xff0c;队列位置从1开始 要求使用带哨兵的顺序查找算法 输入要求&#xff1a; 第一行输入n&#xff0c;表示队列有n个数据 第二行输入…

GO 配置国内镜像代理 Go Module代理仓库服务

用法 Go 1.13 及以上&#xff08;推荐&#xff09; 打开你的终端并执行 $ go env -w GO111MODULEon $ go env -w GOPROXYhttps://goproxy.cn,directmacOS 或 Linux 打开你的终端并执行 $ export GO111MODULEon $ export GOPROXYhttps://goproxy.cn或者 $ echo "expo…

java常见面试题:什么是线程(Thread)?Java中的线程有哪些状态?

线程&#xff08;Thread&#xff09;是操作系统能够进行运算调度的最小单位&#xff0c;被包含在进程之中&#xff0c;是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流&#xff0c;一个进程中可以并发多个线程&#xff0c;每条线程并行执行不同的任务。线程…

CAN通信的基本原理与实现方法

一. CAN协议概念 1.1 CAN 协议简介 CAN 是控制器局域网络 (Controller Area Network) 的简称&#xff0c;它是由研发和生产汽车电子产品著称的德国 BOSCH 公司开发的&#xff0c;并最终成为国际标准(ISO11519以及ISO11898),是国际上应用最广泛的现场总线之一。差异点如下&…

手拉手springboot3整合mybatis-plus多数据源

环境介绍 技术栈 springbootmybatis-plusmysql 软件 版本 mysql 8 IDEA IntelliJ IDEA 2022.2.1 JDK 17 Spring Boot 3.1.7 dynamic-datasource 3.6.1 mybatis-plus 3.5.3.2 加入依赖 <dependency><groupId>com.baomidou</groupId><arti…

苹果macOS 14.3开发者预览版Beta 2发布 修复API会意外失败的问题

1 月 4 日消息&#xff0c;苹果向 Mac 电脑用户推送了 macOS 14.3 开发者预览版 Beta 2 更新&#xff08;内部版本号&#xff1a;23D5043d&#xff09;&#xff0c;本次更新距离上次发布隔了 22 天。 macOS Sonoma 14.3 Beta 2 主要以修复 BUG、提高安全性为主。根据苹果官方更…