HarmonyOS Grid 网格列表可长按 item 拖动移动位置

方案一
@Component
struct WorkCircleCreatePage {
  // 存储车控列表的数组
  @State VehicleDoorArr: IVehicleDoor[] = []
  // 当前移动的Item索引
  @State CurrentIndex: number = -1
  // 拖动时显示的数据
  @State MoveItem: IVehicleDoor = { title: '', icon: '' }
  // 拖动时放大倍数
  @State ScaleXY: ScaleOptions = { x: 1, y: 1 }
  // 是否超出范围
  @State isExtendGridArea: boolean = false
  @State isPress: boolean = false //是否按压

  aboutToAppear() {
    this.getData()
  }

  getData() {
    // 列表的数据
    let list: IVehicleDoor[] = [
      { title: 'item1', icon: $r('app.media.portrait_person_default') },
      { title: 'item2', icon: $r('app.media.portrait_person_default') },
      { title: 'item3', icon: $r('app.media.portrait_person_default') },
      { title: 'item4', icon: $r('app.media.portrait_person_default') },
      { title: 'item5', icon: $r('app.media.portrait_person_default') },
      { title: 'item6', icon: $r('app.media.portrait_person_default') },
      { title: 'item7', icon: $r('app.media.portrait_person_default') },
    ]
    if (this.VehicleDoorArr.length == 0) {
      list.forEach((item: IVehicleDoor, index: number) => {
        this.VehicleDoorArr.push(item)
      })
    }
  }

  // 交换数组位置
  changeIndex(itemIndex: number, insertIndex: number) {
    // this.VehicleDoorArr.splice(insertIndex,1,this.VehicleDoorArr(itemIndex,1)[0])
    const item = this.VehicleDoorArr[itemIndex]
    this.VehicleDoorArr.splice(itemIndex, 1)
    this.VehicleDoorArr.splice(insertIndex, 0, item)
  }

  //设置拖拽过程中显示的图片。
  @Builder
  pixelMapBuilder() {
    Column() {
      Column() {
        Column() {
          Image(this.MoveItem.icon)
            .width(24)
            .aspectRatio(1)
        }
        .height(56)
        .width(56)
        .borderRadius(56)
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.White)
        .draggable(false) //是否支持拖拽
        Text(this.MoveItem.title)
          .height(17)
          .fontSize('12fp')
          .textAlign(TextAlign.Center)
          .fontFamily('PingFang SC')
          .fontWeight(400)
          .margin({ top: 6 })
      }
      .scale(this.ScaleXY)
    }
    .width('25%').height(100)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    NavDestination() {

      Column() {
        Row() {
          Text('拖拽实现自定义排序')
            .width('100%')
            .textAlign(TextAlign.Center)
        }
        .width('100%')
        .height(100)

        Row() {
          Divider()
            .strokeWidth(0.5)
            .width(95)
          Text('长按可拖动顺序')
            .width(112)
            .height(24)
            .fontSize('16fp')
            .fontWeight(400)
            .textAlign(TextAlign.Center)
            .fontFamily('PingFang SC')
            .margin({ left: 16.5, right: 16.5 })
          Divider()
            .strokeWidth(0.5)
            .width(95)
        }
        .width('100%')
        .margin({ top: 24, bottom: 24 })
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Center)

        Grid() {
          ForEach(this.VehicleDoorArr, (item: IVehicleDoor, index: number) => {
            GridItem() {
              VehicleDoorItem({ VehicleDoorItem: item })
            }
            .scale(this.CurrentIndex === index ? th