关于 antd tree 组件的推拽操作

当前位置:

首页 > 网站开发 > JavaScript >

关于 antd tree 组件的推拽操作

　　最近项目中使用到 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);

									      }

									    }

									  };

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

原文：https://www.cnblogs.com/weblinda/p/15239322.html

栏目列表