This page provides a demonstration of the makeSource and makeTarget functions. Drag Connections from the big blue element to any of the small green ones. You can also drag Connections from one green element to another, because Connections in jsPlumb are, by default, detachable (this behaviour can be overridden at the default level, or on a per-call basis).

These functions provide an alternative means of setting up your UI to support draggable connections - in the other demos you will see Endpoints being created and assigned to elements, which are then used as the sources and targets for Connections. But in this demonstration we treat entire elements as sources and targets, and only when Connections are established do we assign Endpoints for them, according to the parameters specified in the makeSource and makeTarget method calls.

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

var sourceAnchors = [ 
	[ 0, 1, 0, 1 ],
	[ 0.25, 1, 0, 1 ],
	[ 0.5, 1, 0, 1 ],
	[ 0.75, 1, 0, 1 ],
	[ 1, 1, 0, 1 ]				
];
jsPlumb.makeSource("window1", {
	endpoint:{
	    anchor:sourceAnchors
	}
});

var smallWindows = jsPlumb.getSelector(".smallWindow");
for (var i = 0; i < smallWindows.length; i++) {	
  jsPlumb.draggable(smallWindows[i]);
  jsPlumb.makeTarget(smallWindows[i], {
    endpoint:{
      paintStyle: { fillStyle:'#558822' },
      anchor:"TopCenter"      
    },
    dropOptions:{ hoverClass:"hover" }
  });
}

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