在兩個可拖動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); 
});