1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- ;(function() {
-
- window.jsPlumbDemo = {
-
- init : function() {
-
- jsPlumb.bind("click", function(conn) {
- jsPlumb.detach(conn);
- jsPlumb.removeEndpoint(conn.target, conn.endpoints[1]);
- });
-
- jsPlumb.draggable($("#window1,#window3,#window4,#window5"));
-
- var dropOptions = { hoverClass:"hover", activeClass:"active" };
-
- jsPlumb.importDefaults({
- Container : $("body"),
- EndpointStyle : {fillStyle:"#E5E529"},
- PaintStyle : {
- lineWidth:4,
- strokeStyle:"#E5E529",
- outlineColor:"#FFFFD1",
- outlineWidth:2
- },
- HoverPaintStyle : {
- lineWidth:4,
- strokeStyle:"pink"
- },
- EndpointHoverStyle : {
- fillStyle:"pink"
- }
- });
-
- //
- // makes window1 into a connection target, specifying that any connections made to window1 will be given
- // a dynamic anchor that has positions at each of the div's corners.
- //
- jsPlumb.makeTarget("window1", {
- anchor:["TopLeft", "TopRight", "BottomRight", "BottomLeft"],
- dropOptions:dropOptions
- });
-
- //
- // makes window3 into a connection target, specifying that connections made to window3 will have an anchor that
- // is located at the position on window3 at which the mouseup event occurred.
- //
- //
- jsPlumb.makeTarget("window3", {
- anchor:[ "Assign", {
- orientation:[0, 1],
- position:"Fixed"
- } ],
- dropOptions:dropOptions
- });
-
- //
- // makes window4 into a connection target, specifying that connections made to window3 will have an anchor that
- // is located on a 2x3 grid.
- //
- //
- jsPlumb.makeTarget("window4", {
- anchor:[ "Assign", {
- position:"Grid",
- grid:[2,3],
- orientation:[0, 1]
- } ],
- dropOptions:dropOptions
- });
-
- //
- // the most basic makeSource call you can make. will use the defaults for everything - endpoint, anchor,
- // endpoint/connector styles, etc. in this demo we have setup defaults for endpoint style and for connector
- // style.
- //
- // note that this div - window2 - is not draggable. this is because it is acting as a connection source, and
- // dragging on this div means create a new connection. see the example below for an alternative to this.
- //
- jsPlumb.makeSource("window2", {anchor:"TopCenter"});
-
- //
- // a more advanced makeSource call: in this one we specify a div we want to use for a connection source,
- // and we provide the 'parent' parameter, which tells jsPlumb that once a connection has been established it
- // should move the source endpoint to that element.
- jsPlumb.makeSource($("#w5Source"), {
- //anchor:"Continuous",
- anchor:"AutoDefault",
- parent:"window5"
- });
- }
- };
-
- })();
|