在两个元素之间画一条连接线


105

如何在两个或多个元素之间画线以连接它们?HTML / CSS / JavaScript / SVG / Canvas的任何组合都可以。

如果您的答案支持以下任何一项,请提及:

  • 可拖动元素
  • 可拖动/可编辑的连接
  • 避免元素重叠

该问题已更新,以巩固其众多变体

Answers:


164

jsPlumb是一个支持拖放的选项,从其众多演示(包括Flowchart演示)可以看出。

它提供免费的社区版和付费的工具包版。

该工具包版将社区版包装有一个全面的数据绑定层,以及用于构建应用程序和流行库集成的多个UI小部件,并已获得商业许可。


4
令人惊叹的工具包,但请注意:它不是免费的!如果您打算公开托管或在您自己的产品中出售,他们希望您购买许可证(请参阅jsplumbtoolkit.com/purchase)。
克里斯(Chris)

50

用svgs连接线对我来说是值得一试的,并且效果非常好...首先,可伸缩矢量图形(SVG)是用于二维图形的基于XML的矢量图像格式,支持交互性和动画。SVG图像及其行为在XML文本文件中定义。您可以使用<svg>标签在HTML中创建svg 。Adobe Illustrator是用于使用路径创建复杂svg的最佳软件之一。

使用一行连接两个div的过程:

  1. 创建两个div并根据需要给它们任何位置

    <div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
    <div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
    

    (为便于说明,我正在做一些内联样式设置,但制作单独的css文件进行样式设置总是很好的)

  2. <svg><line id="line1"/></svg>

    线标签允许我们在两个指定点(x1,y1)和(x2,y2)之间画一条线。(有关参考,请访问w3schools。)我们尚未指定它们。因为我们将使用jQuery编辑line标签的属性(x1,y1,x2,y2)。

  3. <script>标签中写

    line1 = $('#line1');   
    div1 = $('#div1');   
    div2 = $('#div2');
    

    我使用选择器来选择两个div和行...

    var pos1 = div1.position();
    var pos2 = div2.position();
    

    jQuery position()方法允许我们获取元素的当前位置。有关更多信息,请访问https://api.jquery.com/position/(您也可以使用offset()method)

现在,当我们获得所需的所有位置时,我们可以按如下所示绘制线...

line1
  .attr('x1', pos1.left)
  .attr('y1', pos1.top)
  .attr('x2', pos2.left)
  .attr('y2', pos2.top);

jQuery .attr()方法用于更改所选元素的属性。

我们在上述行中所做的只是更改了以下行的属性

x1 = 0
y1 = 0
x2 = 0
y2 = 0

x1 = pos1.left
y1 = pos1.top
x2 = pos2.left
y2 = pos2.top

position()返回两个值(一个“ left”和另一个“ top”)时,我们可以使用对象(此处为pos1和pos2)使用.top和.left轻松访问它们。

现在,线标签具有两个不同的坐标,可在两个点之间绘制线。

提示:根据需要添加事件监听器

提示:在脚本标记中编写任何内容之前,请确保先导入jQuery库

通过JQuery添加坐标之后 ...看起来像这样

以下代码段仅用于演示目的,请按照上面的步骤操作以获取正确的解决方案

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="50" stroke="red"/></svg>


3
请不要将相同的答案复制并粘贴到多个问题。相反,请定制各个问题的答案。
安迪

2
我需要使用z-index -1在背景中将svg放在宽度和高度100%的背景下,但它的工作原理就像是一个魅力。
2016年


31
拒绝投票的人,请评论这样做的原因...我对两个问题都发布了相同的答案,因为我确信此答案适用于两个问题...如果两个问题相关,那么他们的答案也可能相关..我没有做任何不正确的事情……
Ani

6

几天前我也有同样的要求

我用了一个完整的宽度高度 SVG并补充它下面的所有div的我并增加线路动态SVG这些。

svg处查看我的操作方法

的HTML

<div id="ui-browser"><div class="anchor"></div>
     <div id="control-library" class="library">
       <div class="name-title">Control Library</div>
       <ul>
         <li>Control A</li>
         <li>Control B</li>
         <li>Control C</li>
         <li>Control D</li>
       </ul>
     </div><!--
--></div><!--
--><div id="canvas">
     <svg id='connector_canvas'></svg>
     <div class="ui-item item-1"><div class="con_anchor"></div></div>
     <div class="ui-item item-2"><div class="con_anchor"></div></div>
     <div class="ui-item item-3"><div class="con_anchor"></div></div>
     <div class="ui-item item-1"><div class="con_anchor"></div></div>
     <div class="ui-item item-2"><div class="con_anchor"></div></div>
     <div class="ui-item item-3"><div class="con_anchor"></div></div>
   </div><!--
--><div id="property-browser"></div>

https://jsfiddle.net/kgfamo4b/

    $('.anchor').on('click',function(){
   var width = parseInt($(this).parent().css('width'));
   if(width==10){
     $(this).parent().css('width','20%');
     $('#canvas').css('width','60%');
   }else{
      $(this).parent().css('width','10px');
     $('#canvas').css('width','calc( 80% - 10px)');
   }
});

$('.ui-item').draggable({
  drag: function( event, ui ) {
           var lines = $(this).data('lines');
           var con_item =$(this).data('connected-item');
           var con_lines = $(this).data('connected-lines');

           if(lines) {
             lines.forEach(function(line,id){
                    $(line).attr('x1',$(this).position().left).attr('y1',$(this).position().top+1);  
             }.bind(this));
           }

           if(con_lines){
               con_lines.forEach(function(con_line,id){
                  $(con_line).attr('x2',$(this).position().left)
                        .attr('y2',$(this).position().top+(parseInt($(this).css('height'))/2)+(id*5));
               }.bind(this));

           }

       }
});

$('.ui-item').droppable({
  accept: '.con_anchor',
  drop: function(event,ui){
     var item = ui.draggable.closest('.ui-item');
     $(this).data('connected-item',item);
     ui.draggable.css({top:-2,left:-2});
     item.data('lines').push(item.data('line'));

     if($(this).data('connected-lines')){
        $(this).data('connected-lines').push(item.data('line'));

         var y2_ = parseInt(item.data('line').attr('y2'));
         item.data('line').attr('y2',y2_+$(this).data('connected-lines').length*5);

     }else $(this).data('connected-lines',[item.data('line')]);

     item.data('line',null);
    console.log('dropped');
  }
});


$('.con_anchor').draggable({drag: function( event, ui ) {
     var _end = $(event.target).parent().position();
     var end = $(event.target).position();
     if(_end&&end)  
     $(event.target).parent().data('line')
                                                    .attr('x2',end.left+_end.left+5).attr('y2',end.top+_end.top+2);
},stop: function(event,ui) {
        if(!ui.helper.closest('.ui-item').data('line')) return;
        ui.helper.css({top:-2,left:-2});
        ui.helper.closest('.ui-item').data('line').remove();
        ui.helper.closest('.ui-item').data('line',null);
        console.log('stopped');
      }
});


$('.con_anchor').on('mousedown',function(e){
    var cur_ui_item = $(this).closest('.ui-item');
    var connector = $('#connector_canvas');
    var cur_con;

  if(!$(cur_ui_item).data('lines')) $(cur_ui_item).data('lines',[]);

  if(!$(cur_ui_item).data('line')){
         cur_con = $(document.createElementNS('http://www.w3.org/2000/svg','line'));
         cur_ui_item.data('line',cur_con);
    } else cur_con = cur_ui_item.data('line');

    connector.append(cur_con);
    var start = cur_ui_item.position();
     cur_con.attr('x1',start.left).attr('y1',start.top+1);
     cur_con.attr('x2',start.left+1).attr('y2',start.top+1);
});

在Safari版本12.0.1(14606.2.104.1.1)上似乎不起作用
balupton,



2

最近,我尝试开发一个简单的Web应用程序,该应用程序使用拖放组件并用线连接它们。我遇到了以下两个简单而有趣的javascript库:

  1. Plain Draggable:简单而高性能的库,允许拖动HTML / SVG元素。
  2. 领导线:在您的网页上绘制领导线


1




By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.