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

      }

    }

  };

　　

各引數註明到程式碼裡面，有錯誤處還請各位道友多指正。