HarmonyOS 如何实现Listitem的拖拽排序

如何实现Listitem的拖拽排序

HarmonyOS
2024-12-20 15:19:14
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

List可以通过拖拽事件onItemDragMove和onItemDrop实现。

Demo如下:

@Entry
@Component
struct ListExample {
  @State arr: number[] = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
  @State dragItem: number = -1

  // 拖动的元素,注意不是index
  @Builder
  dragFloatView(item: number) {
    Column() {
      Text('' + item)
        .textAlign(TextAlign.Center)
        .borderRadius(10)
        .backgroundColor(Color.White)
        .fontSize(16)
        .width('100%')
        .height(100)
    }
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
          .visibility(item == this.dragItem ? Visibility.Hidden : Visibility.Visible)
          .id(item.toString())
        }, (item: string) => item)
      }
      .listDirection(Axis.Vertical)
      .width('100%')
      .onItemMove((from: number, to: number) => {
        return true
      })
      .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
        // 开始拖拽列表元素时触发。
        this.dragItem = this.arr[itemIndex]
        return this.dragFloatView(this.arr[itemIndex])
      })
      .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => {
        // 拖拽在列表元素范围内移动时触发。
        animateTo({ duration: 200, curve: Curve.Linear }, () => {
          let deleteIndex = this.arr.indexOf(Number(this.dragItem))
          this.arr.splice(deleteIndex, 1)
          this.arr.splice(insertIndex, 0, Number(this.dragItem))
        })
      })
      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
        // 绑定该事件的列表元素可作为拖拽释放目标,当在列表元素内停止拖拽时触发。
        this.dragItem = -1
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
  }
}
分享
微博
QQ
微信
回复
2024-12-20 17:58:54
相关问题
HarmonyOS如何实现list listitem拖拽
1338浏览 • 1回复 待解决
HarmonyOS GridRow 实现拖拽排序
267浏览 • 1回复 待解决
HarmonyOS Grid组件拖拽排序
560浏览 • 1回复 待解决
HarmonyOS 关于Grid组件拖拽排序问题
964浏览 • 1回复 待解决
HarmonyOS List中listitem较少时无法拖拽
118浏览 • 1回复 待解决
HarmonyOS 组件拖拽如何实现
509浏览 • 1回复 待解决
HarmonyOS 如何实现拖拽GridView
290浏览 • 1回复 待解决
HarmonyOS 如何实现列表拖拽
407浏览 • 1回复 待解决
HarmonyOS 如何实现拖动改变ListItem顺序
558浏览 • 1回复 待解决
Grid如何实现拖拽功能
3010浏览 • 1回复 待解决
HarmonyOS List组件如何实现拖动重排序
422浏览 • 1回复 待解决
HarmonyOS 图片拖拽实现
471浏览 • 1回复 待解决
HarmonyOS 如何实现分割线拖拽
256浏览 • 1回复 待解决
grid如何怎么实现拖拽功能
1138浏览 • 1回复 待解决
拖动实现列表重新排序
1531浏览 • 1回复 待解决