first example endpoint. it's a 25x21 rectangle (the size is provided in the 'style' arg to the Endpoint), and it's both a source
and target. the 'scope' of this Endpoint is 'exampleConnection', meaning any connection starting from this Endpoint is of type
'exampleConnection' and can only be dropped on an Endpoint target that declares 'exampleEndpoint' as its drop scope, and also that
only 'exampleConnection' types can be dropped here.
the connection style for this endpoint is a Bezier curve (we didn't provide one, so we use the default), with a lineWidth of
5 pixels, and a gradient.
note the use of the '$.extend' function to setup generic connection types. this will save you a lot of typing, and probably
errors.
*/
// this is the paint style for the connecting lines..
//updateConnections(e.connection, true);
});
jsPlumb.Defaults.Overlays = [
//[ "Arrow", {location:0.5} ], if you want to add an arrow in the connection
];
jsPlumb.setMouseEventsEnabled(true);
{$js}
// three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
//jsPlumb.draggable("window1");
//jsPlumb.draggable(["window1", "window2"]);
//jsPlumb.draggable($("#window1"));
var divsWithWindowClass = jsPlumbDemo.getSelector(".window");
jsPlumb.draggable(divsWithWindowClass);
// add the third example using the '.window' class.
// three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
//jsPlumb.draggable("window1");
//jsPlumb.draggable(["window1", "window2"]);
//jsPlumb.draggable($("#window1"));
var divsWithWindowClass = jsPlumbDemo.getSelector(".window");
jsPlumb.draggable(divsWithWindowClass);
// add the third example using the '.window' class.
Julio Montoya
14 years ago