Drag and Drop Demo

This demo shows how to enable drag and drop functionality for nodes using the classes NodeDropInputMode, LabelDropInputMode and PortDropInputMode.

For dragging and dropping edges, the demo uses the custom class EdgeDropInputMode.

Things to Try

Drag a node from the palette panel onto the canvas to create a new node.
Drag a port or label from the palette panel onto a node/edge to create a new label/port.
Drag an item near a node to see snapping guidelines.
Drag a node over a group node to see group node highlighting.
Additionally, hold the Ctrl key, if this node is not dragged from the palette panel.
Drop a node over a group node to place it inside the group.
If this node is not dragged from the palette panel, additionally hold the Ctrl key.
Drag an edge from the palette onto another node in the canvas to start edge creation from there.
Drag an edge from the palette onto the empty canvas to create a new node with an edge creation in progress.
Drag an edge from the palette onto another edge to just apply the style of the dragged edge.
Toggle the preview snapping in the toolbar.