Run the snippet bellow, drag at least two items to the center, press "create" button and try to connect endpoints to see the problem.
When I try to connect endpoints from different divs, they actually connect, but the problem is, that the connection path is displayed wrongly. It always connects endpoints in the same div where the source endpoint locates. Despite, if you hover on a point that I really wanted to connect, it shows that connection is done, and even the drag works. Try it yourself for complete experience.
$(document).ready(function() {
$('#deviceName li').draggable({
helper: 'clone',
revert: 'invalid'
});
$('#interface li').draggable({
helper: 'clone',
revert: 'invalid'
});
$('#display li').draggable({
helper: 'clone',
revert: 'invalid'
});
$('#output li').draggable({
helper: 'clone',
revert: 'invalid'
});
function foo(){
$('.foo').each(function() {
$(this).draggable({
containment: $(this).parent(),
stack: '.foo'
});
});
}
$('#mainDiv').droppable({
drop: function(event, ui) {
if (!ui.draggable.hasClass('foo')) {
var title = ui.draggable.text().trim();
var item = $('<div class="foo">').append('<table class="elementTable"><tr><th class="thClass">' + title + '</th></tr><tr class="tableBody"><td class="tableConn">Link 1</td></tr><tr><td class="tableConn">Link 2</td></tr></table>');
item.draggable();
$(this).append(item);
foo();
}
}
});
});
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #2c2c2c;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313));
background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1);
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#leftDiv {
display: inline-block;
width: 16%;
min-height: 100%;
border-right: 3px solid white;
box-sizing: border-box;
float: left;
margin: 0;
padding: 5px;
}
#mainDiv {
display: inline-block;
width: 64%;
min-height: 100%;
border-right: 3px solid white;
box-sizing: border-box;
float: left;
margin: 0;
padding: 5px;
}
#rightDiv {
display: inline-block;
width: 20%;
box-sizing: border-box;
min-height: 100%;
float: left;
margin: 0;
padding: 5px;
}
.foo {
max-width: 250px;
text-align: center;
min-height: 50px;
border: 1px solid white;
border-radius: 10px;
}
.foo table {
width: 100%;
}
.thClass {
border-radius: 10px;
border-bottom: 1px solid white;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
.tableConn{
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".tableConn").each(function(){
if(!$(this).hasClass('_jsPlumb_endpoint_anchor_')){
jsPlumb.addEndpoint($(this), {
anchor: "Right",
isSource:true,
isTarget:true,
connector:"Straight",
endpoint:"Rectangle",
paintStyle:{ fillStyle:"white", outlineColor:"blue", outlineWidth:1 },
hoverPaintStyle:{ fillStyle:"lightblue" },
connectorStyle:{ strokeStyle:"blue", lineWidth:1 },
connectorHoverStyle:{ lineWidth:2 }
});
jsPlumb.addEndpoint($(this), {
anchor: "Left",
isSource:true,
isTarget:true,
connector:"Straight",
endpoint:"Rectangle",
paintStyle:{ fillStyle:"white", outlineColor:"blue", outlineWidth:1 },
hoverPaintStyle:{ fillStyle:"lightblue" },
connectorStyle:{ strokeStyle:"blue", lineWidth:1 },
connectorHoverStyle:{ lineWidth:2 }
});
}
});
});
});
</script>
</head>
<body style="font-family: Arial; color: white;">
<div id="leftDiv">
<ul id="menu">
<li>Device Name
<ul id="deviceName">
<li>
item 1
</li>
</ul>
</li>
<li>Interface
<ul id="interface">
<li>
item 2
</li>
</ul>
</li>
<li>Display
<ul id="display">
<li>
item 3
</li>
</ul>
</li>
<li>Output
<ul id="output">
<li>
item 4
</li>
</ul>
</li>
</ul>
</div>
<div id="mainDiv">
<button id="btn">create</button>
</div>
<div id="rightDiv">
</div>
</body>
</html>I found a solution. Simply, tables don't have unique Ids. After setting them, everything works fine.