Tweet

SOURCES & TARGETS

Drag Connections from the blue element to any of the green ones. You can also drag existing Connections from one green element to another - Connections are, by default, detachable (this behaviour can be overridden).

The makeSource and makeTargetfunctions provide an alternative means of setting up your UI to support draggable connections - here we treat entire elements as sources and targets, and only when Connections are established do we assign Endpoints for them.

The blue element is configured as a Connection source (and is not draggable), with a list of possible Anchor locations.

The `disable` link is excluded from being a drag source through the use of the `filter` parameter on the makeSource call.

The green elements are configured as Connection targets, with a `Top` anchor, and are draggable

This demonstration uses jsPlumb 1.7.2, jQuery 1.9.0 and jQuery UI 1.9.2.For touch support, jQuery Touch Punch is used.

Window 1 disable
Window 2

Window 3

Window 4

Window 5

Window 6