Drag and Drop Demo
This demo shows how to enable drag and drop functionality for nodes using the classes
NodeDropInputMode, LabelDropInputMode and
PortDropInputMode. The demo features two drag and drop panels: the left
one uses yFiles drag and drop and the right one uses the browser-native drag and drop.
The difference between the two mechanisms is the way a drag is started. The left panel
starts a drag with e.g. NodeDropInputMode.startDrag. The right panel uses
the native "dragstart" event to start a drag. The drop input modes are able to react to
the native drag events. Unfortunately, snapping is not supported for elements dragged from
this palette. Note that the right palette only works with mouse events. Native drag and
drop currently cannot handle touch or pen events.
For dragging and dropping edges, the demo uses the custom class
EdgeDropInputMode.
Things to Try
- Drag a node from the palette panels onto the canvas to create a new node.
-
Drag a port or label from the palette panels onto a node/edge to create a new
label/port.
- Drag an item near a node to see snapping guide lines.
-
Drag a node over a group node to see group node highlighting.
Additionally hold the 'Shift' 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 'Shift' 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.
Related Demos