DRAG & DROP

Drag from any Endpoint to similar Endpoints on other elements to create Connections.

Blue Endpoints use a beforeDrop interceptor. This enables you to intercept a new connection and decide whether or not you wish to allow it to proceed. They are also configured to automatically reattach if you drag a Connection off and drop it on the background.

Yellow Endpoints are configured to use a beforeDetach interceptor, which provides a way to programmatically override a Connection detach. Yellow connections are painted with the Straight connector

Green Endpoints support up to three Connections. Once a green Endpoint has three connections, when you drag from it you will drag the oldest connection made on the Endpoint.

This demonstration uses jsPlumb 1.7.2, jQuery 1.9.0 and jQuery UI 1.9.2.For touch support, jQuery Touch Punch is used.