JSPlumb线连接器

Question

我有内在的div，我想能够附加我能够完成这个任务的端点，但是如果你移动div，它会破坏连接。

请看我贴在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 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>

​

第二分区第三分区

Answer 1

通过添加一小行代码找到该解析

jsPlumb.Defaults.Container = $("body");

您可以在这里查看工作版本。

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