- A+
所属分类:Web前端
最近项目中使用到 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); } } };
各参数注明到代码里面,有错误处还请各位道友多指正。