#鸿蒙通关秘籍#如何在组件上实现拖动效果？

使用PanGesture可以在组件上实现拖动效果。下面是详细实现，通过回调函数更新组件的位置：

@Entry
@Component
struct Index {
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State positionX: number = 0;
  @State positionY: number = 0;

  build() {
    Column() {
      Text('PanGesture Offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
        .fontSize(28)
        .height(200)
        .width(300)
        .padding(20)
        .border({ width: 3 })
        .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
        .gesture(
          PanGesture()
           .onActionStart((event: GestureEvent|undefined) => {
             console.info('Pan start');
           })
           .onActionUpdate((event: GestureEvent|undefined) => {
             if(event){
               this.offsetX = this.positionX + event.offsetX;
               this.offsetY = this.positionY + event.offsetY;
             }
           })
           .onActionEnd(() => {
             this.positionX = this.offsetX;
             this.positionY = this.offsetY;
           })
        )
    }
    .height(200)
    .width(250)
  }
}