Формирование замкнутого цикла из двух div с библиотекой JsPlumb - PullRequest
Новая
       9

Формирование замкнутого цикла из двух div с библиотекой JsPlumb

2 голосов
/ 07 августа 2011

У меня есть 2 деления с абсолютной позицией: 

<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');
});

Я хочу связать исходную конечную точку каждого блока с целевой конечной точкой другого блока, но я не могу этого сделать. Если я свяжу исходную конечную точку первого блока с целевой конечной точкой второго блока, исходная конечная точка второго блока не будет работать.

Кто-нибудь знает, где я могу ошибаться?

1 Ответ

2 голосов
/ 08 августа 2011

Я нашел решение. Мне просто нужно правильно установить z-index для каждого объекта: 

._jsPlumb_connector {
    z-index:1;
}

div.node { 
    z-index:2;
}

._jsPlumb_endpoint {
    z-index:3;
}
...