JSPlumb 线路连接器答案

【问题标题】：JSPlumb Line ConnectorsJSPlumb 线路连接器
【发布时间】：2013-08-23 20:22:43
【问题描述】：

我有内部 div，我希望能够附加我能够完成此操作的端点，但如果您移动 div，它会中断连接。

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

第二第二分区第三分区

【问题讨论】：

标签： jquery jquery-ui jsplumb

【解决方案1】：

通过添加一小行代码找到解决方案

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

您可以在此处查看工作版本

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

【讨论】：