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 pointer.
• 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 accordingly.
• Use the undo and redo buttons to revert the effect of a drag and drop recoloring operation.