背景
在最近日常工作中，遇到需要实现拖拽列表中的元素进行位置交换的需求。第一时间翻看了鸿蒙官方文档，发现官方只给Grid提供了Item交换位置的实现方式，然而List并没有提供，于是需要自己动手去实现。本篇文章详细介绍了两种不同的方式去实现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) { return } let temp = this.list[itemIndex]; this.list[itemIndex] = this.list[insertIndex]; this.list[insertIndex] = temp;
首先需要判断拖拽手势是否结束，同时两个下标是否发生数组越界。条件满足后进行元素位置交换。注意list必须被@State或@Local修饰。
方式二
使用列表和元素共同实现元素交换。
- 首先实现元素的onDragStart方法，表示元素被开始拖拽。
.onDragStart((event: DragEvent, extraParams: string) => { })
event：表示元素在屏幕上的坐标信息，extraParams：表示元素被选中时的下标。
- 接着实现列表的onDrop方法，表示列表被拖拽时触发。
.onDrop((event: DragEvent, extraParams: string) =>{ })
event：表示元素在屏幕上的坐标信息，extraParams：表示拖拽过程中列表元素的位置下标。
- 在onDragStart方法中使用局部变量保存拖拽前元素的下标。同时返回被拖拽元素的View，这里定义一个SwitchItemPosition类用来解析extraParams得到拖拽前元素的下标。
// extraParams ：{"selectedIndex":5} this.dragIndex = (JSON.parse(extraParams) as SwitchItemPosition).selectedIndex; return this.pixelMapBuilder(this.listArr[this.dragIndex])
- 在onDrop方法中解析出元素被拖拽的最终位置，然后进行元素位置交换，注意判断数组越界。
let insertIndex: number = (JSON.parse(extraParams) as SwitchItemPosition).insertIndex; if (insertIndex >= this.list.length) { return; } let temp = this.list[itemIndex]; this.list[itemIndex] = this.list[insertIndex]; this.list[insertIndex] = temp;
总结
在实际的开发实现时，通过对列表元素的回调方法的研究与分析，不断的重复尝试，最终实现了列表元素的位置交换，当然目前的实现方案仍有瑕疵，缺少交互动画，
后续会对这些问题进行完善，看完文章，你学会了吗？
