Drag-and-Drop Done Right: Lessons from a Diagramming Canvas

Building a diagramming canvas taught me that drag-and-drop is a state problem disguised as an interaction problem. Pointer events, coordinate transforms between screen and canvas space, and snapping rules all have to agree, or the experience feels broken.

Performance matters the moment you have hundreds of nodes. I keep transforms on the GPU, batch state updates, and avoid re-rendering the whole canvas when one node moves. Virtualization and memoization are essential, not optional.

Accessibility is the part people skip. Keyboard placement, focus order, and ARIA on draggable items make the difference between a toy and a tool.