A dynamic and interactive block tree where blocks can be added, dragged, and connected with parent-child dashed lines.
This project demonstrates a draggable block tree UI built in React with Tailwind CSS. Users can:
- Add new blocks dynamically.
- Drag blocks around freely.
- See dashed lines connecting each block to its parent, updating automatically as blocks move.
- 🎯 Random Initial Position: Blocks appear at random positions on page load.
- ➕ Add Child Blocks: Each block has a
+button to create child blocks. - ✋ Drag & Drop: Blocks can be moved around by mouse drag.
- 📏 Dynamic Connecting Lines: Dashed lines connect parent and child blocks and update as blocks move.
- 🧩 Fully Interactive: Supports multiple levels of block hierarchy.
| Feature | Technology |
|---|---|
| UI | React.js |
| Styling | Tailwind CSS |
| State Management | React useState / useRef |
- User: Can interact with blocks, add child blocks, and drag them around.
git clone https://github.com/ei-shadi/Block_Graph.git
cd Block_Graphnpm installnpm run devOpen http://localhost:5173 to view it in your browser.
src/
├─ components/
│ ├─ Block.jsx # Block component with + button & drag logic
│ ├─ ConnectionLine.jsx # Dashed line between parent and child
├─ utils/
│ └─ randomPosition.js # Utility for generating random coordinates
├─ App.jsx # Main component managing state of blocks
- Blocks’ positions are managed using React state and refs.
- Connecting lines update automatically based on parent-child positions.
- Tailwind CSS handles all styling; feel free to customize for your theme.
This project is licensed under the Fringecore License.