1

我正在尝试将带有嵌套元素的图表组合在一起，这些元素连接到彼此的端点。正如您在这个 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 提示，但特别是：我做错了什么导致无法正确排列吗？我是否滥用了连接器/端点的某些属性？我在这里遇到的放置问题是否有解决方法？

4

0 回答 0