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 No external libraries are required.