Drag and Drop should be handled within the level hierarchy

[GVSSri]

trafficstars

import { Tree } from "react-arborist"; import { data } from "./data";

function Node({ node, style, dragHandle }) { /* This node instance can do many things. See the API reference. */ return ( <div style={style} ref={dragHandle} onClick={() => node.toggle()}> {node.isLeaf ? "🍁" : "🗀"} {node.data.name} ); }

/* Customize Appearance / export default function App() { return ( <Tree initialData={data} openByDefault={false} width={600} height={1000} indent={24} rowHeight={36} paddingTop={30} paddingBottom={10} padding={25 / sets both */} > {Node} </Tree> ); }

export const data = [ { id: "1", name: "Unread" }, { id: "2", name: "Threads" }, { id: "3", name: "Chat Rooms", children: [ { id: "c1", name: "General" }, { id: "c2", name: "Random" }, { id: "c3", name: "Open Source Projects" } ] }, { id: "4", name: "Direct Messages", children: [ { id: "d1", name: "Alice" }, { id: "d2", name: "Bob" }, { id: "d3", name: "Charlie" } ] } ];

Example: Chat Rooms and Direct Messages are parent I need drag within the level same for child also. Appreciate your help. Thanks