鸿蒙开发之拖拽事件

news2024/12/24 9:36:38

一、拖拽涉及的方法

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.coloradmin.cn/o/1360032.html

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

相关文章

ARCGIS PRO SDK 使用条件管理 Pro UI

ARCGIS PRO UI简单介绍以下&#xff1a; 第一步&#xff1a;在Config.daml中在</AddInfo>标签下加上条件<conditions>标签&#xff08;必须添加的&#xff09; <conditions><!-- 定义条件 &#xff0c;此处定义了两个--Tab 另一个为 group><insert…

【AI视野·今日CV 计算机视觉论文速览 第280期】Mon, 1 Jan 2024

AI视野今日CS.CV 计算机视觉论文速览 Mon, 1 Jan 2024 Totally 46 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Learning Vision from Models Rivals Learning Vision from Data Authors Yonglong Tian, Lijie Fan, Kaifeng Chen, Dina K…

Nodejs+express后端学习笔记(1)

1 Node.js安装 1、下载安装包&#xff1a;进入官网&#xff08;https://nodejs.org/en&#xff09;&#xff0c;下载左侧的稳定版。 2、选择安装位置&#xff0c;不用勾选自动安装必要工具。 其他都默认Next。 配置环境&#xff0c;具体参考本文章&#xff1a; https://blo…

java字节码

1. 字节码 1.1 什么是字节码&#xff1f; Java之所以可以“一次编译&#xff0c;到处运行”&#xff0c;一是因为JVM针对各种操作系统、平台都进行了定制&#xff0c;二是因为无论在什么平台&#xff0c;都可以编译生成固定格式的字节码&#xff08;.class文件&#xff09;供…

二叉树的直径,力扣

目录 题目地址&#xff1a; 题目&#xff1a; 我们直接看题解吧&#xff1a; 审题目事例提示&#xff1a; 解题方法&#xff1a; 难度分析&#xff1a; 解题方法分析&#xff1a; 解题分析&#xff1a; 补充说明&#xff1a; 代码优化&#xff1a; 题目地址&#xff1a; 543. 二…

​电脑技巧:​笔记本电脑电流声的原因和解决方案

目录 一、音频设备接口接触不良 二、笔记本电源问题 三、笔记本电脑驱动程序问题 四、音频硬件问题 五、操作系统内部电磁干扰 六、最后总结 大家在日常生活当中&#xff0c;笔记本电脑已经成为我们工作、学习和娱乐的重要工具。但有时我们在使用过程中可能会遇到一个令人…

MySQL-数据库概述

数据库相关概念&#xff1a; 数据库(DateBase)简称DB,就是一个存储数据的仓库&#xff0c;数据有组织的进行存储。 数据库分为关系型数据库简称RDBMS和非关系型数据库 关系型数据库简称RDBMS:建立在关系模型的基础上&#xff0c;由多张相互连接的二维表组成的数据库.简单来说…

项目整合积木报表-设计页面

项目整合积木报表-设计页面 <template><div><iframe id"dome" :srcsrc ></iframe></div> </template><script>export default {data(){return{src:configSrc.src"/jmreport/view/836138868821839872"}}} </…

CentOS 7.6下的HTTP隧道代理配置详解

在CentOS 7.6操作系统中&#xff0c;配置HTTP隧道代理需要一定的技术知识和经验。下面我们将详细介绍如何配置HTTP隧道代理&#xff0c;以确保网络通信的安全性和稳定性。 首先&#xff0c;我们需要了解HTTP隧道代理的基本原理。HTTP隧道代理是一种通过HTTP协议传输其他协议数…

Android 正圆

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"wrap_content"android:layout_height"wrap_content"android:padding&…

遥感影像-语义分割数据集:山体滑坡数据集详细介绍及训练样本处理流程

原始数据集详情 简介&#xff1a;该遥感滑坡数据集由卫星光学图像、滑坡边界的形状文件和数字高程模型组成。该数据集中的所有图像&#xff0c;即770张滑坡图像&#xff08;红点&#xff09;和2003张非滑坡图像&#xff0c;都是从2018年5月至8月拍摄的TripleSat卫星图像中截取…

NGUI基础-三大基础控件之Sprite精灵图片

目录 Sprite是什么 如何创建Sprite 参数相关 Atlas Sprite Material Fixed Aspect Type Simple(普通模式&#xff09; Sliced(切片模式&#xff09; Tiled(平铺模式&#xff09; Filled(填充模式&#xff09; 常见的填充模式有以下几种&#xff1a; Advanced(高级…

Java IO知识点

1. Java IO IO&#xff0c;即输入&#xff08;in&#xff09;和输出&#xff08;out&#xff09;&#xff0c;指应用程序和外部设备之间的数据传递&#xff0c;常见的外部设备包括文件、管道、网络连接。Java 中是通过流处理 IO 的&#xff0c; 那么什么是流&#xff1f; 流…

AcWing 861. 二分图的最大匹配—匈牙利算法

题目链接:AcWing 861. 二分图的最大匹配 问题描述 分析 该题是一道典型的二分图匹配模板题&#xff0c;求解最大匹配数&#xff0c;可以用匈牙利算法来解决&#xff0c;下面举一个例子来说明匈牙利算法是如何运行的 以该图为例&#xff0c;其中 1可以匹配a,c 2可以匹配a,b 3…

Docker-Compose部署Redis(v7.2)哨兵模式

文章目录 一、前提准备1. 主从集群2. 文件夹结构 二、配置文件1. redis server配置文件2. redis sentinel配置文件3. docker compose文件 三、运行四、测试 环境 docker desktop for windows 4.23.0redis 7.2 一、前提准备 1. 主从集群 首先需要有一个redis主从集群&#x…

C++ 实现对战AI五子棋

个人主页&#xff1a;日刷百题 系列专栏&#xff1a;〖C/C小游戏〗〖Linux〗〖数据结构〗 〖C语言〗 &#x1f30e;欢迎各位→点赞&#x1f44d;收藏⭐️留言&#x1f4dd; ​ ​ 前言&#xff1a; 为了能够快速上手一门语言&#xff0c;我们往往在学习了基本语法后&#x…

【自学笔记】01Java基础-09Java关键字详解

介绍java&#xff08;基于java11&#xff09;中所有关键字&#xff0c;以及主要重要的关键字详解。 1 Java 11中的关键字&#xff1a; 1.1 类型声明与变量定义 boolean&#xff1a;声明布尔类型变量&#xff0c;只有两个可能值 true 或 false。byte&#xff1a;声明一个8位有…

[UUCTF 2022 新生赛]ez_rce

[UUCTF 2022 新生赛]ez_rce wp 在做这道题时&#xff0c;我参考了这篇博客&#xff1a; https://www.cnblogs.com/bkofyZ/p/17594549.html 认识到了自己的一些不足。 题目代码如下&#xff1a; <?php ## 放弃把&#xff0c;小伙子&#xff0c;你真的不会RCE,何必在此纠…

实验笔记之——基于COLMAP的Instant-NGP与3D Gaussian Splatting的对比

之前博客进行了COLMAP在服务器下的测试 实验笔记之——Linux实现COLMAP-CSDN博客文章浏览阅读794次&#xff0c;点赞24次&#xff0c;收藏6次。学习笔记之——NeRF SLAM&#xff08;基于神经辐射场的SLAM&#xff09;-CSDN博客NeRF 所做的任务是 Novel View Synthesis&#xf…

静态网页设计——个人兴致小屋(HTML+CSS+JavaScript)

前言 使用技术&#xff1a;HTMLCSSJS 主要内容&#xff1a;对个人兴致的一些介绍&#xff0c;画风优美。 主要内容 1、首页 首页是一个优美的背景加一句欢迎来到xxx的兴致小屋&#xff0c;可将XXX改成自己。点击确定可以跳到主页。 部分代码&#xff1a; <body><…