Description:
Hello, I am trying to implement a feature where I can make a complete tree dragable into another tree. However, I am facing issues in getting the targetType, betweenItem, and Root when I drop the tree into the target tree.
Steps to Reproduce:
Create two tree structures with multiple nodes.
Make the first tree dragable.
Try to drag the first tree and drop it into the second tree.
Expected Result:
When I drop the first tree into the second tree, I expect to get the targetType, betweenItem, and Root of the second tree so that I can render the new resultant tree accordingly.
Actual Result:
However, I am unable to get the targetType, betweenItem, and Root of the second tree, which makes it difficult for me to render the new resultant tree.
Example Resultant Tree:
Here’s an example of how I would like the new resultant tree to look like:
tree
|_ Item1
|_ Item2
|_Dragged Tree
|__dragged item 1
|__dragged item 2
|__dragged item 3
|_Item3
|_Item4
|_Item5
import {
UncontrolledTreeEnvironment,
Tree,
StaticTreeDataProvider,
} from "react-complex-tree";
import { longTree } from "./data";
import "react-complex-tree/lib/style-modern.css";
export default function App() {
const [treeData, setTreeData] = useState(longTree.items);
const [draggedItem, setDraggedItem] = useState(null);
const [sourceTreeId, setSourceTreeId] = useState(null);
const handleDrop = (e, targetTreeId) => {
console.log("target treeid e", targetTreeId, draggedItem, sourceTreeId, e);
console.log("target id", e.target.targetType);
// if (draggedItem && sourceTreeId !== targetTreeId) {
// // Move the dragged item from the source tree to the target tree
// const updatedTreeData = { ...treeData };
// // Implement logic to update the tree structure
// // Example: Remove item from the source tree and add it to the target tree
// setTreeData(updatedTreeData);
// }
};
const handleDragStart = (e, item, sourceTreeId) => {
console.log("drag start", e);
setDraggedItem(item);
setSourceTreeId(sourceTreeId);
};
const handleDragOver = (e) => {
e.preventDefault();
console.log("e target hover", e);
// Implement logic to handle drag over event
};
return (
<UncontrolledTreeEnvironment
canDragAndDrop={true}
canDropOnFolder={true}
canReorderItems={true}
dataProvider={
new StaticTreeDataProvider(longTree.items, (item, data) => ({
...item,
data,
}))
}
getItemTitle={(item) => item.data}
viewState={{}}
>
<div
style={{
display: "flex",
justifyContent: "space-evenly",
alignItems: "baseline",
padding: "20px 0",
flexDirection: "column",
}}
>
<div
draggable="true"
// onDragStart={(e) => handleDragStart(e, "Fruit")}
onDragOver={handleDragOver}
onDrop={handleDrop}
style={{
width: "28%",
marginTop: "10px",
backgroundColor: "white",
order: 0,
}}
>
<span
draggable="true"
onDragStart={(e) => handleDragStart(e, "Fruit")}
>
||
</span>
<Tree treeId="tree-4" rootItem="Fruit" treeLabel="Tree 1" />
</div>
<div
draggable="true"
onDragOver={handleDragOver}
onDrop={handleDrop}
style={{
width: "28%",
marginTop: "10px",
backgroundColor: "white",
order: 1,
}}
>
<span
draggable="true"
onDragStart={(e) => handleDragStart(e, "Meals")}
>
||
</span>
<Tree treeId="tree-5" rootItem="Meals" treeLabel="Tree 2" />
</div>
<div
draggable="true"
onDragOver={handleDragOver}
onDrop={handleDrop}
style={{
width: "28%",
marginTop: "10px",
backgroundColor: "white",
order: 2,
}}
>
<span
draggable="true"
onDragStart={(e) => {
handleDragStart(e, "Drinks");
}}
>
||
</span>
<Tree treeId="tree-6" rootItem="Drinks" treeLabel="Tree 3" />
</div>
<div
draggable="true"
onDragOver={handleDragOver}
onDrop={handleDrop}
style={{
width: "28%",
marginTop: "10px",
backgroundColor: "white",
order: 3,
}}
>
<span
draggable="true"
onDragStart={(e) => handleDragStart(e, "Desserts")}
>
||
</span>
<Tree treeId="tree-7" rootItem="Desserts" treeLabel="Tree 4" />
</div>
</div>
</UncontrolledTreeEnvironment>
);
}```
What thing I am doing wrong, suggest me any other way to achieve similar functionality
Example Resultant Tree:
Here's an example of how I would like the new resultant tree to look like:
tree
|_ Item1
|_ Item2
|_Dragged Tree
|__dragged item 1
|__dragged item 2
|__dragged item 3
|_Item3
|_Item4
|_Item5
