Question

我正在尝试将带有嵌套元素的图表放在一起，这些元素连接到彼此的端点。正如您在this jsFiddle中看到的那样，它并不是很顺利。 JS完整转载如下：

jsPlumb.ready(function () {
    jsPlumb.importDefaults({ ConnectionOverlays: [["Arrow", { location: 1 }]] });
    var pinCount = 0;
    var pin = {
        endpoint: "Dot",
        isSource: true,
        isTarget: true,
        maxConnections: -1,

        paintStyle: {
            strokeStyle: "#1e8151",
            fillStyle: "transparent",
            radius: 7,
            lineWidth: 2
        },
        connectorStyle: {
            lineWidth: 3,
            strokeStyle: "#deea18",
            joinstyle: "round",
            outlineColor: "#eaedef",
            outlineWidth: 0,
            overlays: [
                ["Arrow", {
                    location: 1
                }]
            ]
        },
        connectorHoverStyle: {
            lineWidth: 4,
            strokeStyle: "#5C96BC",
            outlineWidth: 2,
            outlineColor: "white"
        },
        connector: ["StateMachine", {
            stub: [5, 5],
            gap: 10,
            cornerRadius: 5,
            alwaysRespectStubs: true
        }]
    }

    jsPlumb.draggable($(".container"));
    jsPlumb.draggable($(".reactor"), { containment: "parent" });

    function rebalance(part, side) {
        var ends = $.grep(jsPlumb.getEndpoints(part), function (elem, i) {
            return elem.anchor.type == side
        });
        var len = ends.length + 1;
        $.each(ends, function (i, elem) {
            elem.anchor.y = (1 / len) * (i + 1);
        });
        jsPlumb.repaintEverything();
    }

    function addPin(part, side) {
        jsPlumb.addEndpoint(part, pin, { anchor: side, uuid: "pin" + pinCount });
        pinCount++;
        rebalance(part, side);
    }

    var $c = $("#container");
    var $r1 = $("#child1"), $r2 = $("#child2");

    addPin($c, "Left");
    addPin($c, "Right");
    addPin($r1, "Left");
    addPin($r1, "Right");
    addPin($r2, "Left");
    addPin($r2, "Right");

    jsPlumb.connect({uuids: ["pin0", "pin2"]});
    jsPlumb.connect({uuids: ["pin3", "pin4"]});
    jsPlumb.connect({uuids: ["pin5", "pin1"]});
});

在["pin3", "pin4"]中，对等节点连接看起来很清晰，直到您移动图表的任何部分。然后他们爆炸了。父/子端点之间的连接从未真正做到他们应该做的事情。从所有涉及的元素中删除position: absolute;和draggable会使某些事情中途通过，但a）仍然存在一些放置问题，并且b）删除这些属性会使目的失败。

一般jsPlumb提示欢迎，但具体来说：我做错了什么，以防止这种情况正常排队？我是否滥用连接器/端点的某些属性？我在这里遇到的展示位置问题有解决方法吗？

jsPlumb中的嵌套元素

0 个答案: