one

toggle connections
disable dragging
detach all
two

toggle connections
disable dragging
detach all
three

toggle connections
disable dragging
detach all
four

toggle connections
disable dragging
detach all

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. 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.9 and YUI 3.3.0