HarmonyOS如何实现list listitem拖拽-鸿蒙开发者社区-51CTO.COM

HarmonyOS如何实现list listitem拖拽

list的ListItem设置了拖拽事件 但是在

.onDragMove((event: DragEvent, extraParams: string) => {   console.info('List onDragMove, ' + extraParams) })

extraParams 返回的数据都是空值 没有相应的index值。

HarmonyOS
2024-08-09 11:59:38
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

List不支持onDragMove事件,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-08-09 18:32:55
相关问题
Grid如何实现拖拽功能
2447浏览 • 1回复 待解决
ListListItem组件的使用
1530浏览 • 1回复 待解决
HarmonyOS 如何实现拖动改变ListItem顺序
252浏览 • 1回复 待解决
grid如何怎么实现拖拽功能
768浏览 • 1回复 待解决
HarmonyOS List第一个可见的ListItem
180浏览 • 1回复 待解决
HarmonyOS ListItem滑动编辑后如何复原?
201浏览 • 1回复 待解决
HarmonyOS 拖拽不起效果
345浏览 • 1回复 待解决