HarmonyOS grid里面的item支持拖动问题？

Question

想要grid里面的item支持拖动,拖出来后可以删除,下面的代码就是你们上次给我提供的,正常情况下是可以使用的但是,往下拖的过程中遇到了TextInput后,gridItem的onDragMove就不会走了,我给TextInput设置了draggable(false)后无法解决

Answer 1

import { media } from '@kit.MediaKit';
import { BusinessError } from '@kit.BasicServicesKit';

import util from '@ohos.util';
import { curves } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State numbers: number[] = []
  @State isTextInputVisible: boolean = true
  @State isGridItemVisible: Visibility = Visibility.Visible
  scroller: Scroller = new Scroller()
  @State enableScroll: boolean = true
  @State scaleItem: number = -1
  @State dragItem: number = -1
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State currentY: number = 0
  private dragRefOffsetx: number = 0
  private dragRefOffsety: number = 0
  private FIX_VP_X: number = 108
  private FIX_VP_Y: number = 120

  aboutToAppear() {
    for (let i = 1; i <= 11; i++) {
      this.numbers.push(i)
    }
  }

  //向左滑
  left(index: number): void {
    this.offsetX += this.FIX_VP_X
    this.dragRefOffsetx -= this.FIX_VP_X
    this.itemMove(index, index - 1)
  }

  //向右滑
  right(index: number): void {
    this.offsetX -= this.FIX_VP_X
    this.dragRefOffsetx += this.FIX_VP_X
    this.itemMove(index, index + 1)
  }

  itemMove(index: number, newIndex: number): void {
    console.info('index:' + index + ' newIndex:' + newIndex)
    let tmp = this.numbers.splice(index, 1)
    this.numbers.splice(newIndex, 0, tmp[0])
  }

  build() {
    Column({ space: 5 }) {
      Grid(this.scroller) {
        ForEach(this.numbers, (item: number) => {
          GridItem() {
            Text(item + '')
              .fontSize(16)
              .width('100%')
              .textAlign(TextAlign.Center)
              .height(100)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
              .animation({ curve: Curve.Sharp, duration: 300 })
          }
          .visibility(this.dragItem == item ? Visibility.Hidden : Visibility.Visible) // 根据被拖动的item来设置visibility
          .width(100)
          .height(100)
          .padding(5)
          .zIndex(this.dragItem == item ? 1 : 0)
          .scale({ x: this.scaleItem == item ? 1.05 : 1, y: this.scaleItem == item ? 1.05 : 1 })
          .translate(this.dragItem == item ? { x: this.offsetX, y: this.offsetY } : { x: 0, y: 0 })
          .onDragStart((event: DragEvent, extraParams?: string) => {
            animateTo({ curve: Curve.Friction, duration: 300 }, () => {
              this.scaleItem = item
            })
            this.dragItem = item
            this.dragRefOffsetx = event.getWindowX()
            this.dragRefOffsety = event.getWindowY()
          })
          .onDrop((event: DragEvent, extraParams?: string) => {
          })
          .onDragMove((event: DragEvent, extraParams?: string) => {
            this.enableScroll = false
            console.log('onDragMove GridItem getWindowX', event.getWindowX())
            console.log('onDragMove GridItem getWindowY', event.getWindowY())
            this.offsetX = event.getWindowX() - this.dragRefOffsetx
            this.offsetY = event.getWindowY() - this.dragRefOffsety
            this.currentY = event.getWindowY()
            console.log('onDragMove GridItem offsetX', this.currentY)
            animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
              let index = this.numbers.indexOf(this.dragItem)
              console.log('index', index)
              if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY < this.FIX_VP_Y) {
                this.right(index)
              } else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY < this.FIX_VP_Y) {
                this.left(index)
              }
            })
            this.isGridItemVisible = Visibility.Hidden
          })
          .onDragEnd(() => {
            this.enableScroll = true
            this.isTextInputVisible = true
            this.isGridItemVisible = Visibility.Visible
            animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
              this.dragItem = -1
              this.scaleItem = -1
            })
          })
        }, (item: number) => item.toString())
      }
      .padding({ left: 20, right: 20 })
      .width('100%')
      .height('120')
      .scrollBar(BarState.Off)
      .rowsTemplate('1fr')
      .columnsGap(5)
      .editMode(true)
      .edgeEffect(EdgeEffect.Spring)
      .backgroundColor('#0D182431')
      .enabled(this.enableScroll)

      // Modified TextInput to ignore drag events
      TextInput({placeholder: '添加标题'})
        .width('100%')
        .height(200)
      // .visibility(this.isTextInputVisible ? Visibility.Visible : Visibility.Hidden)
      // .onDragMove(() => {
      // // 隐藏TextInput
      // this.isTextInputVisible = false
      // })

      Text('删除')
        .width('100%')
        .height(50)
        .backgroundColor(Color.Red)
        .position({ bottom: 0 })
        .visibility(this.currentY > 580 ? Visibility.Visible : Visibility.Hidden)
        .hitTestBehavior(HitTestMode.None)
    }
    .width('100%')
    .height('100%')
    .margin({ top: 5 })
    .backgroundColor('#0D182431')
  }
}