标签：index dragNode const dropPosition tree arr item 组件 antd

　　最近项目中使用到 tree 组件的推拽操作， 按常理来说应该主要用到其中的 onDrop 事件，但其中的参数又没有详细的说明，只是在官网给了个例子，网上搜索后又没有发现到位的总结。

因此经过N次的测试，在这里总结下 onDrop 的各参数的意义及使用场景。

先看代码，在官网基础上稍有改动，如下：

const onDrop = (info) => {
    const { node, dragNode, dropPosition, dropToGap, event, dragNodesKeys } = info;
    // node         代表当前被drop 的对象
    // dragNode     代表当前需要drop 的对象
    // dropPosition 代表drop后的节点位置；不准确
    // dropToGap    代表移动到非最顶级组第一个位置
    const dropKey = node.key;
    const dragKey = dragNode.key;
    const dropPos = node.pos.split('-');

    // trueDropPosition: ( -1 | 0 | 1 ) dropPosition计算前的值，可以查看rc-tree源码;
    // -1 代表移动到最顶级组的第一个位置
    const trueDropPosition = dropPosition - Number(dropPos[dropPos.length - 1]);
    const data = [...gData];

    loop(data, dragKey, (item, index, arr) => {
      arr.splice(index, 1);
    });
    if (!dropToGap) {
      // 移动到非最顶级组第一个位置
      loop(data, dropKey, (item) => {
        item.children = item.children || [];
        // where to insert 示例添加到头部，可以是随意位置
        item.children.unshift(dragNode);
      });
    } else {
      // 平级移动、交叉组移动、移动到其他组(非最顶级)非第一个位置
     
      let ar;
      let i;
      loop(data, dropKey, (item, index, arr) => {
        ar = arr;
        i = index;
      });
      if (trueDropPosition === -1) {
        // 移动到最顶级第一个位置
        ar.splice(i, 0, dragNode);
      } else {
        // trueDropPosition:   1 | 0
        ar.splice(i + 1, 0, dragNode);
      }
    }

  };

各参数注明到代码里面，有错误处还请各位道友多指正。

标签：index,dragNode,const,dropPosition,tree,arr,item,组件,antd
来源： https://www.cnblogs.com/weblinda/p/15239322.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。