antd Tree拖拽位置说明

 antd tree拖拽时,有些节点只能放在指定类型下或插入到数据中等需求,需要根据dropPosition、dropToGap插入到对应位置,这两个含义说明如下:

onDrop = info => {   
    // info.node: drop时放置位置相关的节点,可能是drop位置的上个元素(同级或上级)、最顶层时是下个元素
    const dropKey = info.node.props.key;
    // info.dragNode:拖拽的节点
    const dragKey = info.dragNode.props.key;
    const dropPos = info.node.pos.split('-'); 
    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
    /**
     * dropPosition说明:
     * -1:移动到和dropKey的平级,并在其上面(即info.dropPosition比dropKey的下标小一个)
     * 1:移动到和dropKey的平级,并在其下面(info.dropPosition比dropKey的下标大一个)
     * 0:是移动到dropKey下面作为他的子级(info.dropPosition和dropKey的下标同样大
     */
    // info.dropToGap:最外一层的第一个是true,移动到其他树枝的第一个时是false,移动到不是第一个的位置是true
}

注意:antd不同版本时,info对应node和dragNode结构差异,上面是antd3.X

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-11 14:02:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-11 14:02:04       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-11 14:02:04       87 阅读
  4. Python语言-面向对象

    2024-03-11 14:02:04       96 阅读

热门阅读

  1. C++基础语法和概念

    2024-03-11 14:02:04       32 阅读
  2. mysql 分组取前10条数据

    2024-03-11 14:02:04       42 阅读
  3. MySql的CURRENT_TIMESTAMP和ON UPDATE CURRENT_TIMESTAMP

    2024-03-11 14:02:04       42 阅读
  4. LeetCode 每日一题 2024/3/4-2024/3/10

    2024-03-11 14:02:04       30 阅读
  5. Python-OpenCV-边缘检测

    2024-03-11 14:02:04       39 阅读
  6. connection.query()和 connection.execute()

    2024-03-11 14:02:04       48 阅读
  7. Chromedriver安装新版本时需要先卸载旧版本么?

    2024-03-11 14:02:04       47 阅读
  8. 【Python】正则

    2024-03-11 14:02:04       50 阅读
  9. [蓝桥杯 2018 省 B] 递增三元组

    2024-03-11 14:02:04       48 阅读
  10. # 关于virt-cat命令之-c|--connect参数问题

    2024-03-11 14:02:04       50 阅读