關於 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);
      }
    }

  };

　　

各參數注明到代碼里面，有錯誤處還請各位道友多指正。