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.