HarmonyOS grid 触发拖拽的中途, 怎么才可以做到禁止修改第1个和最后一个item的位置?

HarmonyOS grid 触发拖拽的中途, 怎么才可以做到禁止修改第1个和最后一个item的位置?

HarmonyOS
2024-11-28 09:36:36
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
put_get

参考代码:

import curves from '@ohos.curves' 
@Entry 
@Component 
struct GridItemExample { 
  @State numbers: number[] = [] 
  @State dragItem: number = -1 
  @State scaleItem: number = -1 
  @State item: number = -1 
  private dragRefOffsetx: number = 0 
  private dragRefOffsety: number = 0 
  @State offsetX: number = 0 
  @State offsetY: 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) 
    } 
  } 
  itemMove(index: number, newIndex: number): void { 
    console.info('index:' + index + ' newIndex:' + newIndex) 
    if (!this.isDraggable(newIndex)) { 
      return 
    } 
    let tmp = this.numbers.splice(index, 1) 
    this.numbers.splice(newIndex, 0, tmp[0]) 
  } 
  //向下滑 
  down(index: number): void { 
    // 指定固定GridItem不响应事件 
    if (!this.isDraggable(index + 3)) { 
      return 
    } 
    this.offsetY -= this.FIX_VP_Y 
    this.dragRefOffsety += this.FIX_VP_Y 
    this.itemMove(index, index + 3) 
  } 
  //向下滑(右下角为空) 
  down2(index: number): void { 
    if (!this.isDraggable(index + 3)) { 
      return 
    } 
    this.offsetY -= this.FIX_VP_Y 
    this.dragRefOffsety += this.FIX_VP_Y 
    this.itemMove(index, index + 3) 
  } 
  //向上滑 
  up(index: number): void { 
    if (!this.isDraggable(index - 3)) { 
      return 
    } 
    this.offsetY += this.FIX_VP_Y 
    this.dragRefOffsety -= this.FIX_VP_Y 
    this.itemMove(index, index - 3) 
  } 
  //向左滑 
  left(index: number): void { 
    if (!this.isDraggable(index - 1)) { 
      return 
    } 
    this.offsetX += this.FIX_VP_X 
    this.dragRefOffsetx -= this.FIX_VP_X 
    this.itemMove(index, index - 1) 
  } 
  //向右滑 
  right(index: number): void { 
    if (!this.isDraggable(index + 1)) { 
      return 
    } 
    this.offsetX -= this.FIX_VP_X 
    this.dragRefOffsetx += this.FIX_VP_X 
    this.itemMove(index, index + 1) 
  } 
  //向右下滑 
  lowerRight(index: number): void { 
    if (!this.isDraggable(index + 4)) { 
      return 
    } 
    this.offsetX -= this.FIX_VP_X 
    this.dragRefOffsetx += this.FIX_VP_X 
    this.offsetY -= this.FIX_VP_Y 
    this.dragRefOffsety += this.FIX_VP_Y 
    this.itemMove(index, index + 4) 
  } 
  //向右上滑 
  upperRight(index: number): void { 
    if (!this.isDraggable(index - 2)) { 
      return 
    } 
    this.offsetX -= this.FIX_VP_X 
    this.dragRefOffsetx += this.FIX_VP_X 
    this.offsetY += this.FIX_VP_Y 
    this.dragRefOffsety -= this.FIX_VP_Y 
    this.itemMove(index, index - 2) 
  } 
  //向左下滑 
  lowerLeft(index: number): void { 
    if (!this.isDraggable(index + 2)) { 
      return 
    } 
    this.offsetX += this.FIX_VP_X 
    this.dragRefOffsetx -= this.FIX_VP_X 
    this.offsetY -= this.FIX_VP_Y 
    this.dragRefOffsety += this.FIX_VP_Y 
    this.itemMove(index, index + 2) 
  } 
  //向左上滑 
  upperLeft(index: number): void { 
    if (!this.isDraggable(index - 4)) { 
      return 
    } 
    this.offsetX += this.FIX_VP_X 
    this.dragRefOffsetx -= this.FIX_VP_X 
    this.offsetY += this.FIX_VP_Y 
    this.dragRefOffsety -= this.FIX_VP_Y 
    this.itemMove(index, index - 4) 
  } 
  isDraggable(index: number): boolean { 
    console.info('index:' + index) 
    return index > 0 && index!= this.numbers.length -1; 
  } 
  build() { 
    Column({space:10}) { 
      Column({space:5}) { 
        Text("Grid拖拽排序动效") 
        Text("第一个和最后一个组件不可拖拽") 
      } 
      Grid() { 
        ForEach(this.numbers, (item: number) => { 
          GridItem() { 
            Text(item + '') 
              .fontSize(16) 
              .width('100%') 
              .textAlign(TextAlign.Center) 
              .height(100) 
              .borderRadius(10) 
              .backgroundColor(0xFFFFFF) 
              .shadow(this.scaleItem == item ? { 
                radius: 70, 
                color: '#15000000', 
                offsetX: 0, 
                offsetY: 0 
              } : 
                { 
                  radius: 0, 
                  color: '#15000000', 
                  offsetX: 0, 
                  offsetY: 0 
                }) 
              .animation({ curve: Curve.Sharp, duration: 300 }) 
          } 
          // 指定固定GridItem不响应事件 
          .hitTestBehavior(this.isDraggable(this.numbers.indexOf(item)) ? HitTestMode.Default : HitTestMode.None) 
          .scale({ x: this.scaleItem == item ? 1.05 : 1, y: this.scaleItem == item ? 1.05 : 1 }) 
          .zIndex(this.dragItem == item ? 1 : 0) 
          .translate(this.dragItem == item ? { x: this.offsetX, y: this.offsetY } : { x: 0, y: 0 }) 
          .padding(10) 
          .gesture( 
            // 以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件 
            GestureGroup(GestureMode.Sequence, 
              LongPressGesture({ repeat: true }) 
                .onAction((event?: GestureEvent) => { 
                  animateTo({ curve: Curve.Friction, duration: 300 }, () => { 
                    this.scaleItem = item 
                  }) 
                }) 
                .onActionEnd(() => { 
                  animateTo({ curve: Curve.Friction, duration: 300 }, () => { 
                    this.scaleItem = -1 
                  }) 
                }), 
              PanGesture({ fingers: 1, direction: null, distance: 0 }) 
                .onActionStart(() => { 
                  this.dragItem = item 
                  this.dragRefOffsetx = 0 
                  this.dragRefOffsety = 0 
                }) 
                .onActionUpdate((event: GestureEvent) => { 
                  this.offsetY = event.offsetY - this.dragRefOffsety 
                  this.offsetX = event.offsetX - this.dragRefOffsetx 
                  animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => { 
                    let index = this.numbers.indexOf(this.dragItem) 
                    if (this.offsetY >= this.FIX_VP_Y / 2 && (this.offsetX <= 44 && this.offsetX >= -44) 
                      && ![8, 9, 10].includes(index)) { 
                      //向下滑 
                      this.down(index) 
                    } else if (this.offsetY <= -this.FIX_VP_Y / 2 && (this.offsetX <= 44 && this.offsetX >= -44) 
                      && ![0, 1, 2].includes(index)) { 
                      //向上滑 
                      this.up(index) 
                    } else if (this.offsetX >= this.FIX_VP_X / 2 && (this.offsetY <= 50 && this.offsetY >= -50) 
                      && ![2, 5, 8, 10].includes(index)) { 
                      //向右滑 
                      this.right(index) 
                    } else if (this.offsetX <= -this.FIX_VP_X / 2 && (this.offsetY <= 50 && this.offsetY >= -50) 
                      && ![0, 3, 6, 9].includes(index)) { 
                      //向左滑 
                      this.left(index) 
                    } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2 
                      && ![2, 5, 7, 8, 9, 10].includes(index)) { 
                      //向右下滑 
                      this.lowerRight(index) 
                    } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY <= -this.FIX_VP_Y / 2 
                      && ![0, 1, 2, 5, 8].includes(index)) { 
                      //向右上滑 
                      this.upperRight(index) 
                    } else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2 
                      && ![0, 3, 6, 9, 10].includes(index)) { 
                      //向左下滑 
                      this.lowerLeft(index) 
                    } else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY <= -this.FIX_VP_Y / 2 
                      && ![0, 1, 2, 3, 6, 9].includes(index)) { 
                      //向左上滑 
                      this.upperLeft(index) 
                    } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2 
                      && [7].includes(index)) { 
                      //向右下滑(右下角为空) 
                      this.down2(index) 
                    } 
                  }) 
                }) 
                .onActionEnd(() => { 
                  animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => { 
                    this.dragItem = -1 
                  }) 
                  animateTo({ 
                    curve: curves.interpolatingSpring(14, 1, 170, 17), delay: 150 
                  }, () => { 
                    this.scaleItem = -1 
                  }) 
                }) 
            ) 
              .onCancel(() => { 
                animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => { 
                  this.dragItem = -1 
                }) 
                animateTo({ 
                  curve: curves.interpolatingSpring(14, 1, 170, 17) 
                }, () => { 
                  this.scaleItem = -1 
                }) 
              }) 
          ) 
        }, (item: number) => item.toString()) 
      } 
      .width('90%') 
      .editMode(true) 
      .scrollBar(BarState.Off) 
      .columnsTemplate("1fr 1fr 1fr") 
    }.width('100%').height('100%').backgroundColor('#0D182431').padding({ top: 5 }) 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
  • 171.
  • 172.
  • 173.
  • 174.
  • 175.
  • 176.
  • 177.
  • 178.
  • 179.
  • 180.
  • 181.
  • 182.
  • 183.
  • 184.
  • 185.
  • 186.
  • 187.
  • 188.
  • 189.
  • 190.
  • 191.
  • 192.
  • 193.
  • 194.
  • 195.
  • 196.
  • 197.
  • 198.
  • 199.
  • 200.
  • 201.
  • 202.
  • 203.
  • 204.
  • 205.
  • 206.
  • 207.
  • 208.
  • 209.
  • 210.
  • 211.
  • 212.
  • 213.
  • 214.
  • 215.
  • 216.
  • 217.
  • 218.
  • 219.
  • 220.
  • 221.
  • 222.
  • 223.
  • 224.
  • 225.
  • 226.
  • 227.
  • 228.
  • 229.
  • 230.
  • 231.
  • 232.
  • 233.
  • 234.
  • 235.
  • 236.
  • 237.
  • 238.
  • 239.
  • 240.
  • 241.
  • 242.
  • 243.
  • 244.
  • 245.
  • 246.
  • 247.
  • 248.
  • 249.
  • 250.
  • 251.
  • 252.
分享
微博
QQ
微信
回复
2024-11-28 15:33:17
相关问题
HarmonyOS list最后一个显示不出来
945浏览 • 1回复 待解决