如何实现如下场景：对列表的列表项进行拖动时，其他列表项自动补位和动态排列的效果。

如何实现如下场景：对列表的列表项进行拖动时，其他列表项自动补位和动态排列的效果。

关键字 列表,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.落位动效可通过自定义动效完成；

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

// 起拖时记录拖拽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
    })
  }