Custom Drag and Drop Demo
This demo shows how to change the color of nodes and edges using drag and drop operations.
yFiles for HTML comes with predefined drag and drop support to create
nodes, labels and
ports. Instead of creating new elements, this demo
shows how you can modify existing elements using a drag and drop operation.
As an example, the demo uses an implementation of the DropInputMode, which
changes the color of nodes and edges when dropping on them.
Things to Try
Drag a color from the palette onto the canvas. A preview is displayed under the mouse
Drag the color around and see how the cursor changes, depending on whether or not a drop
operation can be performed at the current mouse position.
Drag the color over an item that has not the same color. The element is highlighted to
show that the element can be recolored by the drop operation.
Drop a the color on an valid element and observe how the element is recolored
Use the undo and redo buttons to revert the effect of a drag and drop recoloring