This is a demonstration of the StateMachine connector type, and of 'Continuous' anchors, which are anchors whose location is calculated based on the location of all other connected elements.

These behave in a similar way to 'Dynamic' anchors, which have been in jsPlumb for a while now, but Continuous anchors do not require a list of possible locations, and they guarantee that every Connection has its own anchor.

Click and drag new Connections from the red div in each element; the main elements in the UI are configured to be Connection targets. You can drag from one of these divs onto its parent element to create a 'loopback' connection.

Click on a Connection to delete it.

makeSource is used in a special way in this demonstration: it is provided with a 'parent' parameter, which tells jsPlumb which element should be the eventual source of a newly created connection. So although you drag from the red divs, the connection sources are always configured to be the main divs in the UI.

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