HarmonyOS 鸿蒙Next 触发手势问题：实现长按后出现的控件可以拖拽

HarmonyOS 鸿蒙Next 触发手势问题：实现长按后出现的控件可以拖拽

需求: 1.手指[长按],出现一个按钮  2.  手指不能松开,此按钮可以[拖拽]  3. 松开手指,按钮不消失  4. [点击]屏幕其他区域,按钮消失

问题: 如何实现长按到拖拽这一过程

文档: PanGesture 触发拖动手势事件  LongPressGesture 触发长按手势事件 (但是这两个手势不能放在一个component中使用)

如下代码是我的思路,但是不对,会崩溃,错误信息:class constructor cannot called without ‘new’。(但是根本不是没有new的原因啊,自定义component 不需要new啊!)

@Entry
@Componentstruct CursorPage_1 {
  build() {
    Column() {
      Button('').width('80%').height(35)
      .gesture(LongPressGesture({ repeat: true }).onAction(
        (event: GestureEvent) => {
          CursorPage()
        }
      ))
    }
  }
}
@Componentstruct CursorPage {
  @State txt: number = 0
  private panOption: PanGestureOptions = new PanGestureOptions({
    direction: PanDirection.Left | PanDirection.Right
  })
  build() {
    Column() {
      Stack() {
        Text(this.txt.toString()).backgroundColor('#ddff55')
        Column() {}
        .width('100%').height('100%')
        // 左右拖动触发该手势事件
        .gesture(
          PanGesture(this.panOption)
            .onActionStart((event: GestureEvent) => {
              console.info('Pan start')
            })
            .onActionUpdate((event: GestureEvent) => {
              this.txt = event.offsetX
              console.info('Pan ??')
            })
            .onActionEnd(() => {
              console.info('Pan end')
            })
        )
      }.width('100%').height(500).backgroundColor('#c0c0c0').onClick(() => {
        this.txt = 0
      })
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

更多关于HarmonyOS 鸿蒙Next 触发手势问题：实现长按后出现的控件可以拖拽的实战教程也可以访问 https://www.itying.com/category-93-b0.html

22 回复

cke_151.jpeg

你在华为应用市场搜索 雪狼战术板 然后点击 服务 打开添加人物拖动一下效果，看是不是你想要的效果。

更多关于HarmonyOS 鸿蒙Next 触发手势问题：实现长按后出现的控件可以拖拽的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


不好意思,前两天在忙其他项目,才回来!是的是的就是这种效果,长按后可以拖动，

@Builder pixelMapBuilder(itemObj: Athlete) { Column(){ Button(‘xxxxxxx’) } }

build() { Row() { Button(‘xxxxxxx’) } .position({x: this._x, y: this._y}) .visibility(this.bol ? Visibility.Visible : Visibility.None) .onDragStart(() => { console.info(‘xx 开始移动->隐藏人物’) this.bol = false // 控制显示或隐藏 return this.pixelMapBuilder(this.itemObj) }) .onDrop((event: DragEvent) => { console.info('xx Button onDrop1 x: ’ + event.getX() + ', y: ’ + event.getY()) let tmpX = Math.trunc(event.getX() - 30) let tmpY = Math.trunc(event.getY() - 40) if (tmpX < 0 || tmpY < 0) { return } this._x = tmpX this._y = tmpY }) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Up) { this.bol = true } }) }

是的,是这个效果,感谢🙏，

cke_124.png

我是这样实现的

如何控制拖拽方向啊，想实现一个拖拽列表排序功能，只能上下拖拽，没找到怎么控制，有知道吗，求解答

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-gesture-events-single-gesture-0000001450596854-V2#section128381857165115

cke_121.png

您是在真机上调试的是吗，

产品信息

  • 名称: p50pro

我加你了，QQ👀，

cke_279.png

将C蓝色块拖出，拖到下面远处空白区域松手后，黄色块就看不到，也没有显示原来的蓝色块，没法回到原位置

我给高度设置为50%，然后拖出去，松手后，它可以恢复原来的位置。

请问为什么会报class constructor cannot called without ‘new’ 这个错误呀，是因为代码有问题吗

对，onAction()中不能套自定义组件，

好的，感谢，

  • 姓名：张三
  • 性别：男
  • 年龄：28
  • 地址：北京市
  • 爱好：阅读、游泳

请问您知道如何让元素拖拽出组件范围后回到原位置，或者限制元素的拖拽范围吗，现在的效果是元素拖出组件后就消失了，

你想实现长按拖拽，正确代码应该是这样

```javascript
[@Entry](/user/Entry)
[@Componentstruct](/user/Componentstruct) CursorPage_1 {
  private panOption: PanGestureOptions = new PanGestureOptions({
    direction: PanDirection.Left | PanDirection.Right
  })
  build() {
    Column() {
      Button('拖拽')
        .width('80%')
        .height(35)
        .gesture(
          LongPressGesture({ repeat: true }).onAction((event: GestureEvent) => {
            CursorPage()
          })
        )
        .gesture(
          PanGesture(this.panOption)
            .onActionStart((event: GestureEvent) => {
              console.info('Pan start')
            })
            .onActionUpdate((event: GestureEvent) => {
              //this.offsetY = this.positionY + event.offsetY
              console.info('Pan ??')
            })
            .onActionEnd(() => {
              console.info('Pan end')
            })
        )
    }
  }
}

您的这个按钮, 实现了既能实现长按也能实现拖拽, 但是, 俺想实现的是, 这个按钮先实现[长按]后, 才可以[拖拽], 在没有触发长按的时候, 不可以拖拽! 我找到了一个解决的方法, GestureGroup(组合手势) 但是现在有一个新问题! 他不能真正的实现拖拽啊! 他只是识别手势在干嘛!

那也很简单呀，定义一个isDrop变量。监听一下就好了

代码如下

@Entry
@Component
struct CursorPage_1 {
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })
  @State isDrop: boolean = false
  build() {
    Column() {
      Button('拖拽').width('80%').height(35)
        .gesture(LongPressGesture({ repeat: true }).onAction((event: GestureEvent) => {
          this.isDrop = true
        }))
        .gesture(
          PanGesture(this.panOption)
            .onActionStart((event: GestureEvent) => {
              console.info('Pan start')
            })
            .onActionUpdate((event: GestureEvent) => {
              if (this.isDrop) {
                // 触发拖拽的方法
              }
              console.info('Pan ??')
            })
            .onActionEnd(() => {
              console.info('Pan end')
            })
        )
    }
  }
}

您说的没毛病,确实可以实现长按后,“松开手指后”可以拖动!但是我可能没有表述明白,就是我要实现的是,长按屏幕,出现一个十字光标,这个光标可以拖动,松开手指,这个光标就不可以拖动了!(我懂了,是我调研的方向错了,我得先调研怎么让全屏的[十字光标]动起来!哎,我真笨啊!)

在HarmonyOS鸿蒙Next中，实现长按后出现的控件可以拖拽的功能，可以通过Gesture和DragEvent来实现。首先，使用LongPressGesture监听长按事件，然后在长按触发时，创建一个可拖拽的控件。通过DragEvent监听拖拽事件，并在拖拽过程中更新控件的位置。

具体步骤如下：

  1. 使用LongPressGesture监听长按事件，设置长按触发时间。
  2. 在长按触发时，创建一个新的控件，并设置为可拖拽状态。
  3. 使用DragEvent监听拖拽事件，在onDragStart、onDragUpdate和onDragEnd中分别处理拖拽的开始、更新和结束逻辑。
  4. 在onDragUpdate中更新控件的位置，使其跟随手指移动。

代码示例：

import { LongPressGesture, DragEvent, GestureGroup } from '@ohos.multimodalinput';

let longPressGesture = new LongPressGesture({ duration: 1000 });
let dragEvent = new DragEvent();

longPressGesture.onAction(() => {
    // 创建可拖拽控件
    let draggableControl = createDraggableControl();
    draggableControl.setDraggable(true);

    dragEvent.onDragStart((event) => {
        // 拖拽开始逻辑
    });

    dragEvent.onDragUpdate((event) => {
        // 更新控件位置
        draggableControl.setPosition(event.getX(), event.getY());
    });

    dragEvent.onDragEnd((event) => {
        // 拖拽结束逻辑
    });
});

let gestureGroup = new GestureGroup();
gestureGroup.addGesture(longPressGesture);
gestureGroup.start();
回到顶部