Problem with forming a closed loop of two divs

[GoogleCodeExporter]

I have 2 divs with position absolute:

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

Each block has source and target endpoints:

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

I want to link the source endpoint of each block to the target endpoint of 
another block, but I can't do it. If I link the source endpoint of the first 
block to the target endpoint of the second block, the source endpoint of the 
second block will not work.

I attached file with script that reproduce this scenario?

Original issue reported on code.google.com by sitet...@gmail.com on 7 Aug 2011 at 11:02

Attachments:

• simple.html

[GoogleCodeExporter]

this is just a z-index issue.  try adding these styles and you will see what i 
mean - the canvas elements would overlay the endpoints without the z-index 
stuff:

._jsPlumb_connector {
border:1px solid red;
z-index:1;
}

.node {
z-index:2;
border:1px solid blue;
}

._jsPlumb_endpoint {
z-index:3;
}

Original comment by simon.po...@gmail.com on 7 Aug 2011 at 11:29

• Changed state: Invalid

[GoogleCodeExporter]

attached is a screenshot of the closed loop you want.

Original comment by simon.po...@gmail.com on 7 Aug 2011 at 11:32

Attachments:

• issue_118.png

[GoogleCodeExporter]

You are right! This solution works. Thank you!

Original comment by sitet...@gmail.com on 8 Aug 2011 at 4:38

[GoogleCodeExporter]

you're welcome ;)

Original comment by simon.po...@gmail.com on 8 Aug 2011 at 4:45