鸿蒙HarmonyOS List拖拽位置交换多种实现方式

技术实现

方式一

使用列表的手势事件实现位置交换。

先实现List的onItemDragStart方法。该方法表示拖拽列表元素时触发。

.onItemDragStart((event: ItemDragInfo, index: number) => {
 
 })

event：表示拖拽点坐标,index：表示当前位置元素的下标。

然后实现列表的onItemDrop方法，表示拖拽结束时回调。
.onItemDrop((event:ItemDragInfo,itemIndex:number,insertIndex:number,isSuccess:boolean)=>{

})
event：表示当前交换的位置坐标，itemIndex：表示拖拽前元素的下标，insertIndex：表示需要交换位置元素的下标，isSuccess：表示拖拽是否结束。

为了实现更好的交互效果，在拖拽开始的地方也就是onItemDragStart方法里面，添加拖拽时元素显示的画面，作为返回值。

Column() {
  Text(text.name)
    .fontSize(15)
    .backgroundColor(Color.Blue)
    .width("100%")
    .height(80)
    .borderRadius(10)
    .textAlign(TextAlign.Center)
}.padding(10)

最后在交换拖拽时，交换两个元素的位置即可，即在onItemDrop中实现。

if (!isSuccess || （itemIndex｜｜insertIndex） >= this.arr.length) {