antd Tree拖拽位置说明

CamilleZJ

已于 2024-03-11 11:21:03 修改

阅读量624

点赞数 10

文章标签：前端 javascript 开发语言

于 2024-03-11 11:20:07 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/CamilleZJ/article/details/136618592

版权

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