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

http://jsfiddle.net/scripter78/v3byw/15/


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -