OpenHarmony开发者论坛

标题: 如何实现如下场景：对列表的列表项进行拖动时，其他列表项自动补位和动态排列的效果。 [打印本页]

作者: 北向实践与赋能 时间: 2024-1-4 11:27
标题: 如何实现如下场景：对列表的列表项进行拖动时，其他列表项自动补位和动态排列的效果。
[md]如何实现如下场景：对列表的列表项进行拖动时，其他列表项自动补位和动态排列的效果。
[/md]

作者: 北向实践与赋能 时间: 2024-1-4 11:28
标题: 如何实现如下场景：对列表的列表项进行拖动时，其他列表项自动补位和动态排列的效果。
[md]**关键字**
列表,List,Grid,拖拽,排序

**解决方案**
1.为列表或宫格项(item)添加拖拽能力，使能 draggable，并注册onDragStart；
2.在 onDragStart 回调中将所拖条目设置visibility为 HIDDEN 状态；
2.在列表或宫格项(item)上注册 onDragMove 监听拖起的移动事件；
3.拖动过程中，通过 onDragMove 的 event 参数获取到拖拽跟手点坐标；
4.计算跟手点坐标与item中线的距离关系，当重合时，启动挤位动效；
5.Item布局信息可通过 componentUtils API获取到；
6.挤位动效通过animateTo来改变datasource里的index，触发list的排序动效；
7.落位动效可通过自定义动效完成；

以下是部分关键代码示意：

```ts
// 起拖时记录拖拽item
  .onDragStart((event?: DragEvent, extraParams?: string) => {
this.dragIndex = Number(item.data)
this.dragItem = item
  })
  // 进入新的item时执行挤位效果
  .onDragEnter((event?: DragEvent, extraParams?: string) => {
if (Number(item.data) != this.dragIndex) {
   let current = this.dataSource.findIndex((element) => element.data === this.dragItem.data)
   let index = this.dataSource.findIndex((element) => element.data === item.data)
   animateTo({
      curve: curves.interpolatingSpring(0, 1, 400, 38)
   }, () => {
      this.dataSource.splice(current, 1)
      this.dataSource.splice(index, 0, this.dragItem)
   })
}
  })
// 释放时自定义落位动效，在释放位置开始对dragItem执行动效
  .onDrop((dragEvent: DragEvent) => {
dragEvent.useCustomDropAnimation = true;
// 获取到落位位置
let downLocation = getInspectorByKey(item.data)
let currentLocation = dragEvent.getPreviewRect()
this.dragItem.scale = 1.05
animateTo({
   curve: curves.interpolatingSpring(14, 1, 170, 17)
}, () => {
   this.dragItem.scale = 1
})
  }
```
[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)