我使用JsPlumb库将元素相互连接。我使用了3种端点:Right
,Left
和Top
。对于Right
和Left
个端点,一切正常,但如果我使用其Top
端点连接任何内容,则箭头覆盖旋转并显示不正确。检查这个小提琴:
https://jsfiddle.net/vaxobasilidze/3bc6mm7b/1/
将几个项目拖到右侧容器中,然后按"添加新链接"并将任何内容连接到Top端点。仅当Right
或Left
个端点连接到Top
端点时才会显示错误。我该如何解决这个问题?
$('#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'
});
});
}
var fooCount = $('.foo').length;
$('#mainDiv').droppable({
drop: function(event, ui) {
if (!ui.draggable.hasClass('foo')) {
var Class = ui.draggable.attr("class");
var title = ui.draggable.text().trim();
var item = $('<table class="foo elementTable ' + Class + '" name="' + title + '" id="'+(fooCount+1)+'"><tr class="tableHeader"><th class="thClass">' + title + '</th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>');
$(this).append(item);
fooCount += 1;
foo();
}
}
});
var ListCount = $('.tableConn').length;
$("body").on('click', '.addList', function(){
var newtr = '<tr class="tableBody" id="'+ListCount+'_'+ListCount+'"><td class="tableConn">Link '+(ListCount+1)+'</td></tr>';
ListCount += 1;
$(newtr).insertBefore($(this).parent().parent());
addPoints();
});
function addPoints(){
jsPlumb.setContainer("mainDiv");
jsPlumb.draggable($('.foo'));
$('.tableBody').each(function(){
if(!$(this).hasClass('jsplumb-endpoint-anchor')){
var objId = $(this).attr("id");
jsPlumb.addEndpoint($(this), {
anchor: "Right",
isSource:true,
isTarget:true,
connector:"Bezier",
endpoint: ["Image", {
url: "https://d30y9cdsu7xlg0.cloudfront.net/png/868142-200.png",
width: 17,
height: 17
}],
connectorOverlays:[
[ "Arrow", { width:10, height: 10, length:10, location:0.97, id:"arrow", foldback: 0.8} ]
],
connectorStyle:{ strokeStyle:"grey", lineWidth:3 },
connectorHoverStyle:{ lineWidth:3 },
maxConnections: -1,
uuid: $(this).attr("id")+'r'
});
jsPlumb.addEndpoint($(this), {
anchor: "Left",
isSource:true,
isTarget:true,
connector:"Bezier",
endpoint: ["Image", {
url: "https://d30y9cdsu7xlg0.cloudfront.net/png/868142-200.png",
width: 17,
height: 17
}],
connectorOverlays:[
[ "Arrow", { width:10, height: 10, length:10, location:0.97, id:"arrow", foldback: 0.8} ]
],
connectorStyle:{ strokeStyle:"grey", lineWidth:3 },
connectorHoverStyle:{ lineWidth:3 },
uuid: $(this).attr("id")+'l'
});
jsPlumb.addEndpoint($(this), {
anchor: "Top",
isSource:true,
isTarget:true,
connector:"Bezier",
endpoint: ["Image", {
url: "https://d30y9cdsu7xlg0.cloudfront.net/png/868142-200.png",
width: 17,
height: 17
}],
connectorOverlays:[
[ "Arrow", { width:10, height: 10, length:10, location:0.97, id:"arrow", foldback: 0.8} ]
],
connectorStyle:{ strokeStyle:"grey", lineWidth:3 },
connectorHoverStyle:{ lineWidth:3 },
uuid: $(this).attr("id")+'l'
});
}
});
}
&#13;
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%;
color: #b8c0c8;
background: rgba(0, 0, 0, 0.3);
}
#leftDiv {
display: inline-block;
width: 15%;
height: 100%;
border-right: 3px solid rgba(0,0,0,0.2);
box-sizing: border-box;
float: left;
margin: 0;
padding: 0;
overflow: auto;
text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
}
#deviceInfo {
min-height: auto;
border-bottom: 3px solid rgba(0,0,0,0.2);
padding: 3px;
resize: vertical;
overflow: auto;
}
#menu {
padding: 0;
margin: 0;
margin-bottom: 5px;
list-style-type: none;
}
#menu li {
list-style: none;
padding: 2px;
border-radius: 4px;
margin-top: 1px;
}
#menu li span {
display: block;
width: 100%;
min-height: 20px;
line-height: 20px;
text-align: center;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
cursor: pointer;
}
#menu li ul {
padding: 0;
list-style-type: none;
overflow: hidden;
}
#menu li ul li {
width: 100%;
max-width: 250px;
text-align: center;
min-height: 20px;
line-height: 20px;
margin: auto;
border-bottom: 1px solid rgba(0,0,0,0.3);
cursor: move;
}
#menu li ul li:first-child {
margin-top: 2px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#menu li ul li:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
#settingsDiv {
margin: 0;
width: 100%;
min-height: 10px;
box-sizing: border-box;
margin: 0;
padding: 3px;
overflow: auto;
}
#mainDiv {
display: inline-block;
width: 85%;
min-height: 100%;
box-sizing: border-box;
position: relative;
float: left;
margin: 0;
overflow: auto;
padding: 3px;
}
.foo {
min-width: 250px;
width: auto;
text-align: center;
min-height: 30px;
border: 1px solid #515151;
border-radius: 6px;
position: absolute;
padding: 0;
overflow: hidden;
text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
box-shadow: 5px 5px rgba(0,0,0, 0.1);
}
.thClass {
display: block;
min-width: 150px;
width: 102%;
margin-left: -3px;
text-align: center;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
margin-top: -2px;
min-height: 30px;
line-height: 30px;
font-size: 19px;
cursor: move;
}
.header{
margin-left: 17px;
}
.tableBody {
display: block;
min-height: 25px;
text-align: center;
width: 102%;
margin-left: -2px;
cursor: default;
}
.foo tbody tr td {
display: block;
line-height: 25px;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.addList{
width: 100px;
cursor: pointer;
}
.addList:hover{
text-decoration: underline;
color: antiquewhite;
}
.devInfo {
max-height: 150px;
overflow-y: auto !important;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head runat="server">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!DOCTYPE html>
<head runat="server">
<title>Test</title>
<script src="jquery-3.2.1.js"></script>
<script src="jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.1.8/jsPlumb.js"></script>
<style>
.jsplumb-endpoint {
z-index: 10;
}
</style>
</head>
<body>
<div id="leftDiv">
<div id="deviceInfo">
<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="settingsDiv">
</div>
</div>
<div id="mainDiv">
</div>
&#13;