tree
tree copied to clipboard
onDrop's arguments dropPosition not equal allowDrop's arguments dropPosition
import RcTree from "rc-tree";
import "rc-tree/assets/index.css";
const treeData = [
{
title: "title0",
key: "key0"
},
{
title: "title1",
key: "key1"
},
{
title: "title2",
key: "key2"
},
{
title: "title3",
key: "key3"
},
{
title: "title4",
key: "key4"
},
{
title: "title5",
key: "key5",
children: [
{
title: "title4-0",
key: "key4-0"
},
{
title: "title4-1",
key: "key4-1"
},
{
title: "title4-2",
key: "key4-2"
},
{
title: "title4-3",
key: "key4-3"
}
]
},
{
title: "title6",
key: "key6"
}
];
export default function App() {
return (
<RcTree
allowDrop={(params) => {
if (Math.random() > 0.99) {
console.log("allow drop:", params);
}
return true;
}}
onDrop={(params) => {
console.log("on Drop:", params);
}}
draggable
defaultExpandAll
treeData={treeData}
/>
);
}
try to drag title4-3
as first child(before title4-0
), and see console
I had the same problem. When I want to set the allowDrop rule - only the nodes of the same level can be sorted up and down, because this problem can never be achieved
I think part of the problem is there is a horizontal mouse position component to the drop position. When dropping on the first element in the list, leftish drops gives a drop position of 1, rightish gives a drop position of 0, also correlating to drop to gap true/false.
..edit:: Oh looking more at this.. allowrdop
dropPosition
is only ever 1, 0, -1
I think it's intent is to inform the position in relation to the two nodes. The dragNode and the dropNode. The dragNode
is either before or after the dropNode
.
The way I have handled only allowing nodes of the same level to be sorted is to set a parentKey on each item, then checking that the dropNode key is equal to the parentNodeKey of the drag node. You could also search the children array of the dropNode to see if the dragNode key exists in that array.