Enable Drag to Reorganize

Add drag-and-drop functionality to my org chart so users can reorganize the hierarchy.

Framework: [React, Vue, vanilla JS, etc.]
Current code: [paste your existing org chart code or describe it]

Requirements:
1. Drag any node to move it
2. Drop on another node to make it a child of that node
3. Visual feedback while dragging (ghost image, drop zones)
4. Update the underlying data when reorganization completes
5. Undo button to revert last change

Also consider:
- Can any node be moved, or only certain ones?
- What happens if you drag a parent onto its own child? (prevent cycles)
- Save changes to backend? (show where to add API call)

Keep it beginner-friendly. I want to understand the drag-and-drop pattern.

I'm learning, so explain each part simply.