1
スニペットを実行し、少なくとも2つの項目を中央にドラッグし、「作成」ボタンを押して問題を確認します。jsPlumbコネクタが間違ったパスを表示
異なるdivからエンドポイントを接続しようとすると、実際に接続されますが、接続パスが正しく表示されないという問題があります。ソースエンドポイントが配置されている同じdiv内のエンドポイントを常に接続します。私が実際に接続したいと思っていたポイントにカーソルを合わせると、接続が完了していることが示され、ドラッグさえも機能します。完全な経験のためにそれを試してください。
$(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>