Drag & Drop Nodes

Intuitive organization at your fingertips

Move Nodes Freely on the Canvas

Sitemap Editor provides a fluid drag and drop experience that makes organizing your website structure intuitive and enjoyable. Simply click and hold any node card on the canvas, then drag it to a new position. The node follows your cursor smoothly, and when you release, it stays exactly where you placed it. This freedom to position nodes manually gives you complete control over your sitemap's visual layout.

The drag and drop system works seamlessly with the auto-layout algorithm. When you first add nodes, they're automatically positioned in a clean hierarchical layout. But once you start dragging, you can customize the positions to create the exact visual arrangement you need. Whether you prefer a compact layout or a spacious one with room for annotations, the choice is yours.

💡 Pro tip: When you drag a parent node, all of its children move together, maintaining the relative positions within that branch. This makes it easy to reorganize entire sections of your sitemap.

Hierarchical Drag and Drop

Beyond just moving nodes visually, you can restructure your sitemap hierarchy through drag and drop in the sidebar tree view. Drag any node onto another to make it a child of that node. This powerful feature lets you completely reorganize your site structure without having to delete and recreate pages. The node inherits the color of its new parent section, keeping your visual organization consistent.

The system prevents invalid operations automatically. You can't drop a parent onto one of its own descendants (which would create a circular reference), and the Home node stays anchored as the root. These safeguards ensure your sitemap always maintains a valid tree structure while giving you maximum flexibility to reorganize.

Touch-Optimized for Mobile

The drag and drop feature is fully optimized for touch devices. On tablets and smartphones, you can tap and hold a node to start dragging, then move your finger to reposition it. The interface provides visual feedback during the drag operation, including a subtle opacity change on the dragged node and highlight effects on potential drop targets.

Long-press gestures open the context menu on touch devices, giving you access to all node operations without needing a right-click. This thoughtful touch optimization means you can work on your sitemap from anywhere, whether you're at your desk or reviewing on the go.