This is a demonstration of draggable connections. Drag from any Endpoint to similar Endpoints on other elements to create Connections.

Blue endpoints are configured to use a beforeDrop interceptor, which is a new addition to jsPlumb in 1.3.5. 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. In SVG and VML you will see a dashed line for blue connections; this is set via CSS.

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.

clear plumbing

This demo uses jsPlumb 1.3.5, jQuery 1.7.1 and jQuery UI 1.8.13.