Objective: To achieve the exchange of grid elements when dragging and dropping them

Knowledge points:
The Grid element drag and drop exchange function is often used in applications, such as when editing a nine grid image and dragging it to change the sorting, this function will be used. When dragging and swapping images in the grid, the arrangement of elements will change according to the position of the image drag, and there will be corresponding animation effects to achieve a good user experience.

Grid layout is generally generated by constructing Grid container components and sub components GridItem. Grid is used to set grid layout related parameters, and GridItem defines sub component related features. The grid layout contains grid elements. When the editMode property is set to true for the Grid container component, the editing mode of the Grid component can be enabled. After enabling the editing mode, it is necessary to bind gestures such as long press and drag to the GridItem component. Finally, it is necessary to add explicit animations and set corresponding animation effects. Finally, the dynamic process of dragging and swapping grid elements is presented.

The drag and drop exchange function of Grid grid elements is implemented through the combination of Grid container components, combined gestures, and explicit animations.

  • The Grid component can construct the layout of grid elements.
  • Combining gestures can achieve the effect of dragging and swapping elements.
  • Explicit animation can add animation effects during the process of dragging and swapping elements.

pay attention to
The Grid component currently supports GridItem drag and drop animation. To activate the animation effect, set supportAnimation to true for the Grid container component. But only supports animation in scrolling mode (setting one of rowsTemplate or columnsTemplate). And drag and drop animations are only supported in Grid with size rules, not in cross row or cross column scenes. Therefore, in cross row or cross column scenarios, it is necessary to achieve drag and drop swapping effects through custom Gird layouts, custom gestures, and explicit animations.

In scenarios that require drag and drop swapping, the development process is as follows:

  1. Implement Grid layout, start editMode editing mode, and enter editing mode to drag and drop GridItems inside Grid components.
  2. Bind relevant gestures to the GridItem network element to enable drag and drop operations.
  3. Use explicit animation animateTo to achieve animation effects during the drag and drop process of GridItem.

Actual combat:GridItemDragExchangeDemoPage

@Entry
@Component
struct GridItemDragExchangeDemoPage {
  numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State imageNum: number = 1

  build() {
    Column() {
      Text('网格元素拖拽交换Demo')

      Grid() {
        ForEach(this.numbers, (item: number) => {
          GridItem() {
            Row() {
              Text(item.toString())
            }
            .width(116)
            .aspectRatio(1)
            .draggable(false)
            .animation({ curve: Curve.Sharp, duration: 300 })
            .backgroundColor(Color.Gray)
            .justifyContent(FlexAlign.Center)
          }
        }, (item: number) => item.toString())
      }
      .width('100%')
      .scrollBar(BarState.Off)
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(4)
      .rowsGap(4)
      .editMode(true)
      .supportAnimation(true)
      .onItemDragStart((_, itemIndex: number) => {
        this.imageNum = this.numbers[itemIndex];
        return this.pixelMapBuilder();
      })
      .onItemDrop((_, itemIndex: number, insertIndex: number,
        isSuccess: boolean) => {
        if (!isSuccess || insertIndex >= this.numbers.length) {
          return;
        }
        this.changeIndex(itemIndex, insertIndex);
      })
    }
    .height('100%')
    .width('100%')
  }

  changeIndex(index1: number, index2: number): void {
    let tmp = this.numbers.splice(index1, 1);
    this.numbers.splice(index2, 0, tmp[0]);
  }

  @Builder
  pixelMapBuilder() {
    Column() {
      Row() {
        Text(this.imageNum.toString())
      }
      .width(116)
      .aspectRatio(1)
      .draggable(false)
      .animation({ curve: Curve.Sharp, duration: 300 })
      .backgroundColor(Color.Gray)
      .justifyContent(FlexAlign.Center)
    }
    .zIndex(1)
    .scale({ x: 1.05, y: 1.05 })
    .translate({ x: 0, y: 0 })
  }
}