jquery - JSPlumb Line Connectors -
i have inner divs want able attach end points have been able accomplish breaks connection if move div.
please see example have posted on jsfiddle
http://jsfiddle.net/scripter78/v3byw/
jsplumb.bind("ready", function () { var windows = $(".w"); var subwindows = $(".s"); jsplumb.draggable($(".x")); jsplumb.draggable(windows); window.jsplumbdemo = { init: function () { // setup defaults jsplumb. jsplumb.importdefaults({ endpoint: ["dot", { radius: 2 }], hoverpaintstyle: { strokestyle: "#1e8151", linewidth: 2 }, connectionoverlays: [ ["arrow", { location: 1, id: "arrow", length: 14, foldback: 0.8 }] ] }); jsplumb.bind("click", function (c) { jsplumb.detach(c); }); jsplumb.makesource(windows, { filter: ".ep", // supported jquery anchor: "right", connector: ["flowchart", { curviness: 0 }], connectorstyle: { strokestyle: "#5c96bc", linewidth: 2, outlinecolor: "transparent", outlinewidth: 4 }, maxconnections: 5, onmaxconnections: function (info, e) { alert("maximum connections (" + info.maxconnections + ") reached"); } }); jsplumb.makesource(subwindows, { filter: ".ep", // supported jquery anchor: "right", parent: "parent", issource: true, istarget: true, connector: ["flowchart", { curviness: 0 }], connectorstyle: { strokestyle: "#5c96bc", linewidth: 2, outlinecolor: "transparent", outlinewidth: 4 }, maxconnections: 5, onmaxconnections: function (info, e) { alert("maximum connections (" + info.maxconnections + ") reached"); } }); jsplumb.maketarget(subwindows, { dropoptions: { hoverclass: "draghover" }, anchor: "right" }); // , finally, make couple of connections } }; var resetrendermode = function (desiredmode) { var newmode = jsplumb.setrendermode(desiredmode); $(".rmode").removeclass("selected"); $(".rmode[mode='" + newmode + "']").addclass("selected"); $(".rmode[mode='canvas']").attr("disabled", !jsplumb.iscanvasavailable()); $(".rmode[mode='svg']").attr("disabled", !jsplumb.issvgavailable()); $(".rmode[mode='vml']").attr("disabled", !jsplumb.isvmlavailable()); jsplumbdemo.init(); }; resetrendermode(jsplumb.svg); window.jsplumbdemo.loadtest = function (count) { count = count || 10; (var = 0; < count; i++) { jsplumbdemo.init(); } };
});
<div class="x" id="numberone">number 1 <div class="s"> <div class="sx"></div>second div <div class="ep"></div> </div> <div class="s"> <div class="sx"></div>third div <div class="ep"></div> </div>
number 2 second div third div
found resolution adding 1 small line of code
jsplumb.defaults.container = $("body");
you can review working version here
Comments
Post a Comment