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 plumbingThis demo uses jsPlumb 1.3.10 and YUI 3.3.0