在两个可拖动div之间绘制一条线

Question

是的我知道在以下链接中已询问过这种问题：Question 1，Question 2和Question 3。但是我的问题与已经提出的问题完全不同。我想要的是：我有两个可拖动的div，并有一个连接器（直线）之间（用SVG线绘制）。当我移动这些可拖动的div时，我需要相应地在它们之间移动连接器。我的问题更类似于Question 3，但在那个问题中，一旦用户创建了div之间的连接，那些div停止拖动，所以他们不关心刷新连接器。

有没有人遇到过我正在说的任何工作示例或演示？或者，有没有人可以给我任何关于如何以最佳方式做到这一点的想法？

为了以防万一，我使用jQuery作为javascript框架（如果它值得知道）。

非常感谢。

更新1

我发现这个demo还可以，但它工作得非常糟糕，我会错误地说。

Answer 1

使用jsPlumb - 用于在网页上绘制自定义线条的最佳库。

https://jsplumbtoolkit.com/demos.html

Answer 2

与svgs连接线是值得我一试，和它的工作完美... 首先，可伸缩矢量图形（SVG）是二维的基于XML的矢量图像格式支持交互性和动画的图形。 SVG图像及其行为在XML文本文件中定义。您可以使用<svg>标记在HTML中创建一个svg。 Adobe Illustrator是用于使用路径创建复杂svgs的最佳软件之一。

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> 
   

   （为便于解释，我做了一些内嵌样式：

   步骤，使用线加入两个div但它是一件好事，做出造型单独的css文件）

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

   线条标记允许我们在两个指定点（x1，y1）和（x2，y2）之间绘制一条线。 （参考访问w3schools。）我们还没有指定它们。因为我们将使用jQuery来编辑行标记的属性（x1，y1，x2，y2）。

3. 在<script>标签

   写

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

   我用选择器选择两个div和线...

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

   jQuery的position()方法允许我们获得的元件的当前位置。欲了解更多信息，请访问：https://api.jquery.com/position/（你可以使用offset()方法太）

现在我们已经获得我们需要的，我们可以得出线如下的所有立场...

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()返回两个值，一个“左”和其他“顶”，我们可以使用.top和.left使用对象（这里是pos1和pos2）轻松访问它们...

现在，行标记具有两个不同的坐标来绘制两点之间的直线。

提示：添加事件侦听器，因为你需要的div

提示：先在脚本标签写任何东西

后通过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>

Answer 3

我也有同样的要求，几天就回来

我用了一个全宽度和高度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); 
});