最近專案中使用到 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 = https://www.cnblogs.com/weblinda/archive/2021/09/07/[...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.uj5u.com/qiye/298279.html
標籤：其他
上一篇：前端SEO技巧