鸿蒙开发之拖拽事件

一、拖拽涉及的方法

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.hqwc.cn/news/325309.html

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

相关文章

解决:ModuleNotFoundError: No module named ‘bs4’

解决&#xff1a;ModuleNotFoundError: No module named ‘bs4’ 文章目录 解决&#xff1a;ModuleNotFoundError: No module named bs4背景报错问题报错翻译报错位置代码报错原因解决方法方法一&#xff0c;直接安装方法二&#xff0c;手动下载安装方法三&#xff0c;编译安装…

6 网关和配置服务器

文章目录 网关模式Spring Cloud网关Spring Cloud网关微服务其他项目的变更运行和测试小结 运行状况Spring Boot Actuator在微服务中包含Actuator 服务发现和负载均衡ConsulSpring Cloud ConsulSpring Cloud负载均衡器网关中的服务发现和负载均衡使用服务发现和负载均衡 环境配置…

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

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

React 入门 - 01

本章内容 目录 1. 简介1.1 初始 React1.2 React 相关技术点1.3 React.js vs Vue.js 2. React 开发环境准备2.1 关于脚手架工具2.2 create-react-app 构建一个 React 项目工程 1. 简介 1.1 初始 React React JS 是 Facebook 在 2013年5月开源的一款前端框架&#xff0c;其带来…

mysql之CRUD和常见函数和UNION 和 UNION ALL

mysql之CRUD和常见函数和UNION 和 UNION ALL 一.CRUD1.创建&#xff08;Create&#xff09; - 插入数据2.读取&#xff08;Read&#xff09; - 查询数据3.更新&#xff08;Update&#xff09; - 修改数据4.删除&#xff08;Delete&#xff09; - 删除数据 二.函数1.字符串函数&…

oracle 补齐数字长度 to_char踩坑

oracle的to_char网上找到的说明如下 &#xff08;1&#xff09;用作日期转换&#xff1a; to_char(date,格式); select to_date(2005-01-01 ,yyyy-MM-dd) from dual; select to_char(sysdate,yyyy-MM-dd HH24:mi:ss) from dual; &#xff08;2&#xff09;处理数字&#xf…

MongoDB数据类型详解

BSON 协议与数据类型 MongoDB 为什么会使用 BSON&#xff1f; JSON 是当今非常通用的一种跨语言 Web 数据交互格式&#xff0c;属 ECMAScript 标准规范的一个子集。JSON &#xff08;JavaScript Object Notation&#xff0c;JS 对象简谱&#xff09;即 JavaScript 对象表示法…

【2023 CCF 大数据与计算智能大赛】基于TPU平台实现超分辨率重建模型部署 基于QuickRNet的TPU超分模型部署

2023 CCF 大数据与计算智能大赛 《赛题名称》 基于QuickRNet的TPU超分模型部署 巴黎欧莱雅 林松 智能应用业务部算法工程师 中信科移动 中国-北京 gpu163.com 团队简介 巴黎欧莱雅团队包含一个队长和零个队员。 队长林松&#xff0c;研究生学历&#xff0c;2019-202…

字节填充与0比特填充以及数据链路的基本问题

目录 字节填充&#xff1a; 比特填充&#xff1a; 数据链路有三个基本问题 1.封装成帧 2.透明传输 3.差错检测 首先介绍一下PPP的帧结构&#xff1a; 首部的第一个字段和尾部的第二个字段都是标志字段F(Flag)&#xff0c;规定为0x7E (符号“0x”表示它后面的字符是用十六…

imgaug库指南(五):从入门到精通的【图像增强】之旅

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…

Python基础知识总结1-Python基础概念搞定这一篇就够了

时隔多年不用忘却了很多&#xff0c;再次进行python的汇总总结。好记性不如烂笔头&#xff01; PYTHON基础 Python简介python是什么&#xff1f;Python特点Python应用场景Python版本和兼容问题解决方案python程序基本格式 Python程序的构成代码的组织和缩进使用\行连接符 对象…

嵌入式系统复习--基于ARM的嵌入式程序设计

文章目录 上一篇编译环境ADS编译环境下的伪操作GNU编译环境下的伪操作ARM汇编语言的伪指令 汇编语言程序设计相关运算操作符汇编语言格式汇编语言程序重点C语言的一些技巧 下一篇 上一篇 嵌入式系统复习–Thumb指令集 编译环境 ADS/SDT IDE开发环境&#xff1a;它由ARM公司开…