HarmonyOS 有可以拖动的组件吗,想实现一个广告位可以悬浮在首页，可以拖动，并且拖动放开后自动吸附在最近的边框，点击跳转？

Question

如题：HarmonyOS 有可以拖动的组件吗,想实现一个广告位可以悬浮在首页，可以拖动，并且拖动放开后自动吸附在最近的边框，点击跳转？

Answer 1

实现悬浮窗功能：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-window-stage-V5\#%E8%AE%BE%E7%BD%AE%E6%82%AC%E6%B5%AE%E7%AA%97%E5%8F%97%E9%99%90%E5%BC%80%E6%94%BE

创建子窗口：

https://developer.huawei.com/consumer/cn/doc/atomic-guides-V5/atomic-application-window-V5\#%E8%AE%BE%E7%BD%AE%E5%BA%94%E7%94%A8%E5%AD%90%E7%AA%97%E5%8F%A3

//悬浮窗拖动demo
import window from '@ohos.window';
//悬浮窗加载页面代码
interface Position {
  x: number,
  y: number
}
@Entry
@Component
struct FloatContent {
  @State message: string = '悬浮窗'
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });
  @State @Watch("moveWindow") windowPosition: Position = { x: 0, y: 0 };
  floatWindow: window.Window = window.findWindow("floatWindow")
  build() {
    Row() {
      Text(this.message)
    }
    .width('100%')
    .height('100%')
    .gesture(
      PanGesture(this.panOption)
        .onActionStart((event: GestureEvent) => {
          console.info('Pan start');
        })
        .onActionUpdate((event: GestureEvent) => {
          this.windowPosition.x += event.offsetX;
          this.windowPosition.y += event.offsetY;
        })
        .onActionEnd(() => {
          console.info('Pan end');
        })
    )
    .border({
      style: BorderStyle.Dotted
    })
    .backgroundColor(Color.Yellow)
  }
  moveWindow() {
    this.floatWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y);
  }
  aboutToAppear() {
    this.floatWindow = window.findWindow("floatWindow")
  }
}