HarmonyOS 鸿蒙Next list拖拽调整item顺序

参考以下demo：

interface dragObj {
imgUrl: Resource
text: string
}

@Entry
@Component
struct page240411142325083 {
@State numbers: dragObj[] = [];
scroller: Scroller = new Scroller();
@State currentIndex: number = 0
@State startIndex: number = 0
@State endIndex: number = 0

@Builder
pixelMapBuilder() { //拖拽过程样式
Column() {
Image(this.numbers[this.currentIndex].imgUrl)
.width('40')
.draggable(false)
Text(this.numbers[this.currentIndex].text)
.fontSize(16)
}
.width('100%')
.height(80)
.backgroundColor(0xF9CF93) // .width(80)
.justifyContent(FlexAlign.Center)
}

aboutToAppear() {
for (let i = 1; i <= 15; i++) {
this.numbers.push({
imgUrl: $r('app.media.background'),
text: i + ''
});
}
}

changeIndex(index1: number, index2: number) { //交换数组位置
let tmp = this.numbers[index1]
this.numbers[index1] = this.numbers[index2]
this.numbers[index2] = tmp;
}

build() {
Column({ space: 5 }) {
List({ space: 10, scroller: this.scroller }) {
ForEach(this.numbers, (item: dragObj, index: number) => {
ListItem() {
Column() {
Image(item.imgUrl)
.width('40')
.draggable(false)
Text(item.text)
.fontSize(16)
}
.width('100%')
.height(80)
.backgroundColor(0xF9CF93) // .width(80)
.justifyContent(FlexAlign.Center)
}
})
}
.width('90%')
.backgroundColor(0xFAEEE0)
.height(600)
.onScrollIndex((start: number, end: number, center: number) => {
console.log(`start=${start}`)
console.log(`end=${end}`)
this.startIndex = start
this.endIndex = end
})
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。
//
this.currentIndex = itemIndex
console.log(this.numbers[this.currentIndex].text)
return this.pixelMapBuilder(); //设置拖拽过程中显示的图片。
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
if (insertIndex !== -1) {
console.info('beixiang' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置，insertIndex拖拽插入位置
this.changeIndex(itemIndex, insertIndex)
}
})
.onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => {
console.log(`insertIndex=${insertIndex}`)
if (insertIndex <= this.startIndex + 1 && insertIndex > 1) {
this.scroller.scrollToIndex(insertIndex - 2, true)
}
if (insertIndex >= this.endIndex - 1 && insertIndex < this.numbers.length - 1) {
this.scroller.scrollToIndex(this.startIndex + 2, true)
}
})
}.width('100%').margin({ top: 5 })
}
}