HarmonyOS List拖动？

Question

Grid官方demo 拖动的时候，被拖动的Item是会消失的。List的垂直列表拖动的时候，被拖动的Item不会消失

两者效果不一致 List这个是不是一个bug

List() {
  ListItem() {
    ItemBuilder()
  }

  ListItem() {
    ItemBuilder()
  }

  ListItem() {
    ItemBuilder()
  }

  ListItem() {
    ItemBuilder()
  }
}.width('100%')
.layoutWeight(1)
.height(WrapContent)
.onDragStart(() => {
  return ItemBuilder()
})


@Builder
function ItemBuilder() {
  Row() {
    Text('123456').width(MatchParent).textAlign(TextAlign.Center).height(30)
  }
}

Answer 1

List也可以实现拖拽消失，可参考如下示例Demo：

@Entry
@Component
struct ListItemExample {
  @State arr: number[] = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
  @State dragItem:number = -1
  @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)
  }
}