jsPlumb 连接器显示错误路径

Question

运行下面的代码片段，将至少两个项目拖到中间，按 "create" 按钮并尝试连接端点以查看问题。

当我尝试连接来自不同 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>

Answer 1

我找到了解决办法。简单地说，表没有唯一的 ID。设置好后一切正常

jsPlumb 连接器显示错误路径

jsPlumb connector shows wrong path

javascript

jquery

jquery-ui

endpoints

jsplumb