javascript - 使用 JsPlumb 库形成两个 div 的闭环

Question

我有 2 个绝对位置的 div：

<div class="node" id="block1" style="position: absolute;">Block1</div>
<div class="node" id="block2" style="position: absolute;">Block2</div>

每个块都有源端点和目标端点：

var targetOption = {anchor:"TopCenter",
                    maxConnections:-1, 
                    isSource:false, 
                    isTarget:true, 
                    endpoint:["Dot", {radius:5}], 
                    paintStyle:{fillStyle:"#66FF00"},
                    setDragAllowedWhenFull:true}

var sourceOption = {anchor:"BottomCenter",
                    maxConnections:-1, 
                    isSource:true, 
                    isTarget:false, 
                    endpoint:["Dot", {radius:5}], 
                    paintStyle:{fillStyle:"#FFEF00"},
                    setDragAllowedWhenFull:true}

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

    jsPlumb.addEndpoint('block1', targetOption);
    jsPlumb.addEndpoint('block1', sourceOption);

    jsPlumb.addEndpoint('block2', targetOption);
    jsPlumb.addEndpoint('block2', sourceOption);

    jsPlumb.draggable('block1');
    jsPlumb.draggable('block2');
});

我想将每个块的源端点链接到另一个块的目标端点，但我做不到。如果我将第一个块的源端点链接到第二个块的目标端点，则第二个块的源端点将不起作用。

有谁知道我可能在哪里弄错了？

Answer 1

我找到了解决方案。我只需要为每个对象正确设置 z-index：

._jsPlumb_connector {
    z-index:1;
}

div.node { 
    z-index:2;
}

._jsPlumb_endpoint {
    z-index:3;
}