JSPlumb 라인 커넥터

나는 이것을 수행 할 수있는 엔드 포인트를 첨부 할 수있는 내부 div가 있지만 div를 이동하면 연결이 끊어집니다.JSPlumb 라인 커넥터

내가 jsfiddle에 게시 한 예제를 참조하십시오

jsPlumb.bind("ready", function() { 


     var windows = $(".w"); 
     var subwindows = $(".s"); 
     jsPlumb.draggable($(".x")); 
     jsPlumb.draggable(windows); 



window.jsPlumbDemo = { 

    init: function() { 

     // setup some defaults for 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", // only supported by 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", // only supported by 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" 
     }); 

     // and finally, make a 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; 
    for (var i = 0; i < count; i++) { 
     jsPlumbDemo.init(); 
    } 
};

});

<div class="x" id="numberone">Number One 
<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>

번호 두 둘째 사업부 셋째 사업부

출처

2013-08-23 scripter78