javascript - 如何在两个不同 div 中显示的两个图标之间绘制连线。

Question

我在一个 Div 元素中显示了一个图标。我需要在这些图标之间画一条连接线。请注意 Div 是一个动态元素。

我已经在下面显示了当前图像。

下面显示预期的图像。

请指导我该怎么做。提前致谢。

Answer 1

这是一个小演示，可以帮助您了解如何使用 jsPlumb实现你想要的。

jsPlumb.ready(function() {
            jsPlumb.connect({
                source:"firstItem",
                target:"secondItem",
                endpoint:"Dot"
            });
        });

span{
  display:inline-block;
  height:50px;
  width:100px;
  background-color:yellow;
}

     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
 <div id="diagramContainer">
        <div  >
        <span id="firstItem">Smiley1</span>
        </div>
        <div >
         <span style="float:right" id="secondItem">Smiley2</span>
        </div>
    </div>

希望对您有帮助:)