blocks|key|267129|text|从其numerous+demos+(包括Flowchart+demo+)可以看出，jsPlumb是一个支持拖放的可用选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|267130|它有免费的社区版和付费的工具包版本。|267131|267132|工具包版本为社区版包装了一个全面的数据绑定层，以及几个用于为流行库构建应用程序和集成的UI小部件，并获得了商业许可。|blockquote|267133|267134|entityMap|0|LINK|mutability|MUTABLE|url|https://demo.jsplumbtoolkit.com/|1|https://demo.jsplumbtoolkit.com/flowchart-builder/|2|https://jsplumbtoolkit.com/^0|2|E|0|K|E|1|15|7|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]|$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|17|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|18|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]|U|$5|N|O|P|C|$Q|V]]]]

<p><a href="https://jsplumbtoolkit.com" rel="nofollow noreferrer">jsPlumb</a> is an option available that supports drag and drop, as seen by its <a href="https://demo.jsplumbtoolkit.com/" rel="nofollow noreferrer">numerous demos</a>, including the <a href="https://demo.jsplumbtoolkit.com/flowchart-builder/" rel="nofollow noreferrer">Flowchart demo</a>.</p>
<p>It is available in a free Community edition and a paid Toolkit edition.</p>
<blockquote>
<p>The Toolkit edition wraps the Community edition with a comprehensive data binding layer, as well as several UI widgets for building applications and integrations for popular libraries, and is commercially licensed.</p>
</blockquote>


blocks|key|265712|text|对我来说，使用svgs加入行是值得一试的，而且它工作得很完美……首先，可伸缩矢量图形(+Scalable+Vector+Graphics，SVG)是一种基于XML的二维图形矢量图像格式，支持交互性和动画。SVG图像及其行为在XML文本文件中定义。您可以使用<svg>标签在HTML中创建一个svg。Adobe+Illustrator是使用路径创建复杂svg的最佳软件之一。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|265713|使用一行连接两个div的过程：|265714|need|265715|<svg><line+id="line1"/></svg>时，|unordered-list-item|265716|创建两个div，并为它们提供任意位置|ordered-list-item|265717|265718|265719|Line标签允许我们在两个指定点(x1，y1)和(x2，y2)之间画一条线。(有关参考信息，请访问w3schools。)我们还没有指定它们。因为我们将使用jQuery编辑行标记的属性(x1、y1、x2、y2)。|265720|in+<script>+tag+write|265721|265722|line1+=+$('#+div1+')；div1=$(‘#DIV1’)；div2+=+$('#div2')；|265723|我使用选择器来选择两个div和line...|265724|var+pos1+=+div1.position()；var+pos2+=+div2.position()；|265725|jQuery+position()方法允许我们获得元素的当前位置。有关详细信息，请访问https://api.jquery.com/position/+(也可以使用offset()方法)|265726|现在我们已经获得了我们需要的所有位置，我们可以像下面这样画一条线…|265727|line1
++.attr('x1',+pos1.left)
++.attr('y1',+pos1.top)
++.attr('x2',+pos2.left)
++.attr('y2',+pos2.top);|code-block|syntax|javascript|265728|jQuery+.attr()方法用于更改所选元素的属性。|265729|我们在上面的代码行中所做的就是将line的属性从|265730|x1+=+0
y1+=+0
x2+=+0
y2+=+0|265731|至|265732|x1+=+pos1.left
y1+=+pos1.top
x2+=+pos2.left
y2+=+pos2.top|265733|由于position()返回两个值，一个是'left‘，另一个是'top'，我们可以使用.top和.left通过对象(这里是pos1和pos2)轻松地访问它们……|265734|现在，line标签有两个不同的坐标来在两点之间绘制直线。|265735|提示:在需要div时添加事件侦听器|265736|提示:在脚本标记中写入任何内容之前，请确保先导入jQuery库|265737|通过JQuery添加坐标后的+...它看起来会像这样|BOLD|265738|以下代码片段仅用于演示目的，请按照上述步骤获得正确的解决方案|265739|​|265740|<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>|265741|265742|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/position/^0|3K|5|0|0|0|0|T|0|0|0|0|0|3|8|0|0|0|0|0|7|A|2A|8|17|W|0|0|0|0|7|7|0|0|0|0|0|2|A|0|0|0|0|E|C|0|0|U|0|0|1|0|0|0|1|0^^$0|@$1|2|3|4|5|6|7|2B|8|@$9|2C|A|2D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|2E|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|2F|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|2G|8|@$9|2H|A|2I|B|C]]|D|@]|E|$]]|$1|M|3|N|5|O|7|2J|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|2K|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|2L|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|2M|8|@]|D|@]|E|$]]|$1|T|3|U|5|L|7|2N|8|@$9|2O|A|2P|B|C]]|D|@]|E|$]]|$1|V|3|-4|5|6|7|2Q|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|2R|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|2S|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|2T|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|2U|8|@$9|2V|A|2W|B|C]|$9|2X|A|2Y|B|C]]|D|@$9|2Z|A|30|1|31]]|E|$]]|$1|14|3|15|5|6|7|32|8|@]|D|@]|E|$]]|$1|16|3|17|5|18|7|33|8|@]|D|@]|E|$19|1A]]|$1|1B|3|1C|5|6|7|34|8|@$9|35|A|36|B|C]]|D|@]|E|$]]|$1|1D|3|1E|5|6|7|37|8|@]|D|@]|E|$]]|$1|1F|3|1G|5|18|7|38|8|@]|D|@]|E|$19|1A]]|$1|1H|3|1I|5|6|7|39|8|@]|D|@]|E|$]]|$1|1J|3|1K|5|18|7|3A|8|@]|D|@]|E|$19|1A]]|$1|1L|3|1M|5|6|7|3B|8|@$9|3C|A|3D|B|C]]|D|@]|E|$]]|$1|1N|3|1O|5|6|7|3E|8|@]|D|@]|E|$]]|$1|1P|3|1Q|5|6|7|3F|8|@]|D|@]|E|$]]|$1|1R|3|1S|5|6|7|3G|8|@]|D|@]|E|$]]|$1|1T|3|1U|5|6|7|3H|8|@$9|3I|A|3J|B|1V]]|D|@]|E|$]]|$1|1W|3|1X|5|6|7|3K|8|@$9|3L|A|3M|B|1V]]|D|@]|E|$]]|$1|1Y|3|1Z|5|6|7|3N|8|@$9|3O|A|3P|B|1V]]|D|@]|E|$]]|$1|20|3|21|5|18|7|3Q|8|@]|D|@]|E|$19|1A]]|$1|22|3|1Z|5|6|7|3R|8|@$9|3S|A|3T|B|1V]]|D|@]|E|$]]|$1|23|3|-4|5|6|7|3U|8|@]|D|@]|E|$]]]|24|$25|$5|26|27|28|E|$29|2A]]]]

<p>Joining lines with svgs was worth a shot for me, and it worked perfectly...
first of all, Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behaviors are defined in XML text files. you can create an svg in HTML using <code>&lt;svg&gt;</code> tag. Adobe Illustrator is one of the best software used to create an complex svgs using paths.</p>

<p>Procedure to join two divs using a line :</p>

<ol>
<li><p>create two divs and give them any position as you need</p>

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

<p>(for the sake of explanation I am doing some inline styling but it is always good to make a separate css file for styling)</p></li>
<li><p><code>&lt;svg&gt;&lt;line id="line1"/&gt;&lt;/svg&gt;</code></p>

<p>Line tag allows us to draw a line between two specified points(x1,y1) and (x2,y2). (for a reference visit w3schools.) we haven't specified them yet. because we will be using jQuery to edit the attributes (x1,y1,x2,y2) of line tag.</p></li>
<li><p>in <code>&lt;script&gt;</code> tag write</p>

<pre><code>line1 = $('#line1');   
div1 = $('#div1');   
div2 = $('#div2');
</code></pre>

<p>I used selectors to select the two divs and line...</p>

<pre><code>var pos1 = div1.position();
var pos2 = div2.position();
</code></pre>

<p>jQuery <code>position()</code> method allows us to obtain the current position of an element. For more information, visit <a href="https://api.jquery.com/position/" rel="noreferrer">https://api.jquery.com/position/</a> (you can use <code>offset()</code> method too)</p></li>
</ol>

<p>Now as we have obtained all the positions we need we can draw line as follows...</p>

<pre><code>line1
  .attr('x1', pos1.left)
  .attr('y1', pos1.top)
  .attr('x2', pos2.left)
  .attr('y2', pos2.top);
</code></pre>

<p>jQuery <code>.attr()</code> method is used to change attributes of the selected element. </p>

<p>All we did in above line is we changed attributes of line from </p>

<pre><code>x1 = 0
y1 = 0
x2 = 0
y2 = 0
</code></pre>

<p>to</p>

<pre><code>x1 = pos1.left
y1 = pos1.top
x2 = pos2.left
y2 = pos2.top
</code></pre>

<p>as <code>position()</code> returns two values, one 'left' and other 'top', we can easily access them using .top and .left using the objects (here pos1 and pos2) ... </p>

<p>Now line tag has two distinct co-ordinates to draw line between two points.</p>

<p>Tip: add event listeners as you need to divs</p>

<p>Tip:  make sure you import jQuery library first before writing anything in script tag </p>

<p><strong>After</strong> adding co-ordinates through JQuery ... It will look something like this</p>

<p><em>Following snippet is for demonstration purpose only, please follow steps above to get correct solution</em></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"&gt;&lt;/div&gt;
&lt;div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"&gt;&lt;/div&gt;
&lt;svg width="500" height="500"&gt;&lt;line x1="50" y1="50" x2="350" y2="50" stroke="red"/&gt;&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|267178|text|几天前我也有同样的要求|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267179|我使用了full+width和height++svg+，并将其添加到我所有的div下面，并动态地将行添加到这些svg中。|offset|length|style|BOLD|267180|查看我是如何使用svg做到这一点的|267181|HTML|267182|<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>|code-block|syntax|javascript|267183|https://jsfiddle.net/kgfamo4b/|267184|++++$('.anchor').on('click',function(){
+++var+width+=+parseInt($(this).parent().css('width'));
+++if(width==10){
+++++$(this).parent().css('width','20%25');
+++++$('#canvas').css('width','60%25');
+++}else{
++++++$(this).parent().css('width','10px');
+++++$('#canvas').css('width','calc(+80%25+-+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%2B1);++
+++++++++++++}.bind(this));
+++++++++++}

+++++++++++if(con_lines){
+++++++++++++++con_lines.forEach(function(con_line,id){
++++++++++++++++++$(con_line).attr('x2',$(this).position().left)
++++++++++++++++++++++++.attr('y2',$(this).position().top%2B(parseInt($(this).css('height'))/2)%2B(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_%2B$(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%2B_end.left%2B5).attr('y2',end.top%2B_end.top%2B2);
},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%2B1);
+++++cur_con.attr('x2',start.left%2B1).attr('y2',start.top%2B1);
});|267185|entityMap|0|LINK|mutability|MUTABLE|url^0|0|9|5|F|6|M|5|1D|1|0|8|3|0|0|4|0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@$D|13|E|14|F|G]|$D|15|E|16|F|G]|$D|17|E|18|F|G]|$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|L|3|M|5|N|7|1H|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@$D|1J|E|1K|1|1L]]|A|$]]|$1|S|3|T|5|N|7|1M|8|@]|9|@]|A|$O|P]]|$1|U|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|R]]]]

<p>I also had the same requirement few days back</p>

<p>I used an full <strong>width</strong> and <strong>height</strong> <strong>svg</strong> and  added it below all my divs and added <strong>lines</strong> to these svg dynamically.</p>

<p>Checkout the how I did it here using <strong>svg</strong> </p>

<p><strong>HTML</strong></p>

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

<p><a href="https://jsfiddle.net/kgfamo4b/" rel="nofollow noreferrer">https://jsfiddle.net/kgfamo4b/</a></p>

<pre><code>    $('.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&amp;&amp;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);
});
</code></pre>


blocks|key|268977|text|Raphaël通过其Graffle+example支持这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|268978|268979|此答案基于Awais+Akhtar's+answer和Vaibhav+Jain's+answer。|blockquote|268980|268981|entityMap|0|LINK|mutability|MUTABLE|url|https://dmitrybaranovskiy.github.io/raphael/|1|https://dmitrybaranovskiy.github.io/raphael/graffle.html|2|https://stackoverflow.com/users/864768/awais-akhtar|3|https://stackoverflow.com/a/7481607/130638|4|https://stackoverflow.com/users/3128652/vaibhav-jain|5|https://stackoverflow.com/a/37117135/130638^0|0|7|0|A|F|1|0|0|5|E|2|K|6|3|R|E|4|16|6|5|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]|$A|14|B|15|1|16]]|C|$]]|$1|D|3|-4|5|6|7|17|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|18|8|@]|9|@$A|19|B|1A|1|1B]|$A|1C|B|1D|1|1E]|$A|1F|B|1G|1|1H]|$A|1I|B|1J|1|1K]]|C|$]]|$1|H|3|-4|5|6|7|1L|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]|S|$5|L|M|N|C|$O|T]]|U|$5|L|M|N|C|$O|V]]|W|$5|L|M|N|C|$O|X]]|Y|$5|L|M|N|C|$O|Z]]]]

<p><a href="https://dmitrybaranovskiy.github.io/raphael/" rel="nofollow noreferrer">Raphaël</a> supports this, with its <a href="https://dmitrybaranovskiy.github.io/raphael/graffle.html" rel="nofollow noreferrer">Graffle example</a>.</p>

<blockquote>
  <p>This answer is based off of <a href="https://stackoverflow.com/users/864768/awais-akhtar">Awais Akhtar's</a> <a href="https://stackoverflow.com/a/7481607/130638">answer</a>, and <a href="https://stackoverflow.com/users/3128652/vaibhav-jain">Vaibhav Jain's</a> <a href="https://stackoverflow.com/a/37117135/130638">answer</a>.</p>
</blockquote>


blocks|key|3174424|text|D3有hundreds+of+examples，其中一些适合这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3174425|不需要拖放的示例，已修复：|3174426|3174427|https://beta.observablehq.com/@mbostock/d3-cluster-dendrogram|unordered-list-item|3174428|https://beta.observablehq.com/@mbostock/d3-tidy-tree|3174429|https://beta.observablehq.com/@mbostock/d3-hierarchical-edge-bundling|3174430|https://beta.observablehq.com/@mbostock/d3-radial-dendrogram|3174431|https://beta.observablehq.com/@mbostock/d3-sankey-diagram|3174432|https://www.jasondavies.com/collatz-graph/|3174433|https://bost.ocks.org/mike/hive/|3174434|https://bost.ocks.org/mike/fisheye/|3174435|https://bl.ocks.org/wvengen/cab9b01816490edb7083|3174436|3174437|无需拖放的示例，具有交互性：|3174438|3174439|https://beta.observablehq.com/@mbostock/collapsible-tree|3174440|https://beta.observablehq.com/@mbostock/d3-force-directed-graph|3174441|3174442|拖放示例：|3174443|3174444|http://bl.ocks.org/MoritzStefaner/1377729|3174445|http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779|3174446|3174447|3174448|此答案基于Glenn+Dayton's+answer。|blockquote|3174449|3174450|entityMap|0|LINK|mutability|MUTABLE|url|https://d3js.org/|1|https://github.com/d3/d3/wiki/Gallery|2|3|4|5|6|7|8|9|10|11|12|13|14|15|https://stackoverflow.com/users/924814/glenn-dayton|16|https://stackoverflow.com/a/12048249/130638^0|0|2|0|3|K|1|0|0|0|0|1P|2|0|0|1G|3|0|0|1X|4|0|0|1O|5|0|0|1L|6|0|0|16|7|0|0|W|8|0|0|Z|9|0|0|1C|A|0|0|0|0|0|1K|B|0|0|1R|C|0|0|0|0|0|15|D|0|0|1A|E|0|0|0|5|E|F|K|6|G|0|0^^$0|@$1|2|3|4|5|6|7|2C|8|@]|9|@$A|2D|B|2E|1|2F]|$A|2G|B|2H|1|2I]]|C|$]]|$1|D|3|E|5|6|7|2J|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|2K|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|2L|8|@]|9|@$A|2M|B|2N|1|2O]]|C|$]]|$1|J|3|K|5|I|7|2P|8|@]|9|@$A|2Q|B|2R|1|2S]]|C|$]]|$1|L|3|M|5|I|7|2T|8|@]|9|@$A|2U|B|2V|1|2W]]|C|$]]|$1|N|3|O|5|I|7|2X|8|@]|9|@$A|2Y|B|2Z|1|30]]|C|$]]|$1|P|3|Q|5|I|7|31|8|@]|9|@$A|32|B|33|1|34]]|C|$]]|$1|R|3|S|5|I|7|35|8|@]|9|@$A|36|B|37|1|38]]|C|$]]|$1|T|3|U|5|I|7|39|8|@]|9|@$A|3A|B|3B|1|3C]]|C|$]]|$1|V|3|W|5|I|7|3D|8|@]|9|@$A|3E|B|3F|1|3G]]|C|$]]|$1|X|3|Y|5|I|7|3H|8|@]|9|@$A|3I|B|3J|1|3K]]|C|$]]|$1|Z|3|-4|5|6|7|3L|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|3M|8|@]|9|@]|C|$]]|$1|12|3|-4|5|6|7|3N|8|@]|9|@]|C|$]]|$1|13|3|14|5|I|7|3O|8|@]|9|@$A|3P|B|3Q|1|3R]]|C|$]]|$1|15|3|16|5|I|7|3S|8|@]|9|@$A|3T|B|3U|1|3V]]|C|$]]|$1|17|3|-4|5|6|7|3W|8|@]|9|@]|C|$]]|$1|18|3|19|5|6|7|3X|8|@]|9|@]|C|$]]|$1|1A|3|-4|5|6|7|3Y|8|@]|9|@]|C|$]]|$1|1B|3|1C|5|I|7|3Z|8|@]|9|@$A|40|B|41|1|42]]|C|$]]|$1|1D|3|1E|5|I|7|43|8|@]|9|@$A|44|B|45|1|46]]|C|$]]|$1|1F|3|-4|5|6|7|47|8|@]|9|@]|C|$]]|$1|1G|3|-4|5|6|7|48|8|@]|9|@]|C|$]]|$1|1H|3|1I|5|1J|7|49|8|@]|9|@$A|4A|B|4B|1|4C]|$A|4D|B|4E|1|4F]]|C|$]]|$1|1K|3|-4|5|6|7|4G|8|@]|9|@]|C|$]]|$1|1L|3|-4|5|6|7|4H|8|@]|9|@]|C|$]]]|1M|$1N|$5|1O|1P|1Q|C|$1R|1S]]|1T|$5|1O|1P|1Q|C|$1R|1U]]|1V|$5|1O|1P|1Q|C|$1R|H]]|1W|$5|1O|1P|1Q|C|$1R|K]]|1X|$5|1O|1P|1Q|C|$1R|M]]|1Y|$5|1O|1P|1Q|C|$1R|O]]|1Z|$5|1O|1P|1Q|C|$1R|Q]]|20|$5|1O|1P|1Q|C|$1R|S]]|21|$5|1O|1P|1Q|C|$1R|U]]|22|$5|1O|1P|1Q|C|$1R|W]]|23|$5|1O|1P|1Q|C|$1R|Y]]|24|$5|1O|1P|1Q|C|$1R|14]]|25|$5|1O|1P|1Q|C|$1R|16]]|26|$5|1O|1P|1Q|C|$1R|1C]]|27|$5|1O|1P|1Q|C|$1R|1E]]|28|$5|1O|1P|1Q|C|$1R|29]]|2A|$5|1O|1P|1Q|C|$1R|2B]]]]

<p><a href="https://d3js.org" rel="nofollow noreferrer">D3</a> has <a href="https://github.com/d3/d3/wiki/Gallery" rel="nofollow noreferrer">hundreds of examples</a>, some of which are suitable for this question.</p>

<p>Examples without drag and drop, that are fixed:</p>

<ul>
<li><a href="https://beta.observablehq.com/@mbostock/d3-cluster-dendrogram" rel="nofollow noreferrer">https://beta.observablehq.com/@mbostock/d3-cluster-dendrogram</a></li>
<li><a href="https://beta.observablehq.com/@mbostock/d3-tidy-tree" rel="nofollow noreferrer">https://beta.observablehq.com/@mbostock/d3-tidy-tree</a></li>
<li><a href="https://beta.observablehq.com/@mbostock/d3-hierarchical-edge-bundling" rel="nofollow noreferrer">https://beta.observablehq.com/@mbostock/d3-hierarchical-edge-bundling</a></li>
<li><a href="https://beta.observablehq.com/@mbostock/d3-radial-dendrogram" rel="nofollow noreferrer">https://beta.observablehq.com/@mbostock/d3-radial-dendrogram</a></li>
<li><a href="https://beta.observablehq.com/@mbostock/d3-sankey-diagram" rel="nofollow noreferrer">https://beta.observablehq.com/@mbostock/d3-sankey-diagram</a></li>
<li><a href="https://www.jasondavies.com/collatz-graph/" rel="nofollow noreferrer">https://www.jasondavies.com/collatz-graph/</a></li>
<li><a href="https://bost.ocks.org/mike/hive/" rel="nofollow noreferrer">https://bost.ocks.org/mike/hive/</a></li>
<li><a href="https://bost.ocks.org/mike/fisheye/" rel="nofollow noreferrer">https://bost.ocks.org/mike/fisheye/</a></li>
<li><a href="https://bl.ocks.org/wvengen/cab9b01816490edb7083" rel="nofollow noreferrer">https://bl.ocks.org/wvengen/cab9b01816490edb7083</a></li>
</ul>

<p>Examples without drag and drop, that are interactive:</p>

<ul>
<li><a href="https://beta.observablehq.com/@mbostock/collapsible-tree" rel="nofollow noreferrer">https://beta.observablehq.com/@mbostock/collapsible-tree</a></li>
<li><a href="https://beta.observablehq.com/@mbostock/d3-force-directed-graph" rel="nofollow noreferrer">https://beta.observablehq.com/@mbostock/d3-force-directed-graph</a></li>
</ul>

<p>Examples with dragging and dropping:</p>

<ul>
<li><a href="http://bl.ocks.org/MoritzStefaner/1377729" rel="nofollow noreferrer">http://bl.ocks.org/MoritzStefaner/1377729</a></li>
<li><a href="http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779" rel="nofollow noreferrer">http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779</a></li>
</ul>

<blockquote>
  <p>This answer is based off of <a href="https://stackoverflow.com/users/924814/glenn-dayton">Glenn Dayton's</a> <a href="https://stackoverflow.com/a/12048249/130638">answer</a>.</p>
</blockquote>


blocks|key|265795|text|GoJS的State+Chart+example支持这一点，它支持拖放元素和编辑连接。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|265796|265797|此答案基于Walter+Northwoods'+answer。|blockquote|265798|265799|entityMap|0|LINK|mutability|MUTABLE|url|https://gojs.net/beta/index.html|1|https://gojs.net/beta/samples/stateChart.html|2|https://stackoverflow.com/users/5082978/walter-northwoods|3|https://stackoverflow.com/a/37129361/130638^0|0|4|0|5|J|1|0|0|5|I|2|O|6|3|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|-4|5|6|7|13|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|14|8|@]|9|@$A|15|B|16|1|17]|$A|18|B|19|1|1A]]|C|$]]|$1|H|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]|S|$5|L|M|N|C|$O|T]]|U|$5|L|M|N|C|$O|V]]]]

<p><a href="https://gojs.net/beta/index.html" rel="nofollow noreferrer">GoJS</a> supports this, with its <a href="https://gojs.net/beta/samples/stateChart.html" rel="nofollow noreferrer">State Chart example</a>, that supports dragging and dropping of elements, and editing of connections.</p>

<blockquote>
  <p>This answer is based off of <a href="https://stackoverflow.com/users/5082978/walter-northwoods">Walter Northwoods'</a> <a href="https://stackoverflow.com/a/37129361/130638">answer</a>.</p>
</blockquote>


blocks|key|263635|text|JointJS/Rappid的Kitchensink+example支持这种用例，它支持拖放元素和重新定位连接。It+has+many+examples.|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|263636|263637|此答案基于Vainbhav+Jain's+answer。|blockquote|263638|263639|entityMap|0|LINK|mutability|MUTABLE|url|https://www.jointjs.com/|1|http://resources.jointjs.com/demos/kitchensink|2|http://resources.jointjs.com/demos|3|https://stackoverflow.com/users/3128652/vaibhav-jain|4|https://stackoverflow.com/a/37117135/130638^0|0|E|0|F|J|1|1K|L|2|0|0|5|F|3|L|6|4|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]|$A|12|B|13|1|14]|$A|15|B|16|1|17]]|C|$]]|$1|D|3|-4|5|6|7|18|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|19|8|@]|9|@$A|1A|B|1B|1|1C]|$A|1D|B|1E|1|1F]]|C|$]]|$1|H|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]|S|$5|L|M|N|C|$O|T]]|U|$5|L|M|N|C|$O|V]]|W|$5|L|M|N|C|$O|X]]]]

<p><a href="https://www.jointjs.com" rel="nofollow noreferrer">JointJS/Rappid</a> supports this use case with its <a href="http://resources.jointjs.com/demos/kitchensink" rel="nofollow noreferrer">Kitchensink example</a> which supports dragging and dropping of elements, and repositioning of connections. <a href="http://resources.jointjs.com/demos" rel="nofollow noreferrer">It has many examples.</a></p>

<blockquote>
  <p>This answer is based off of <a href="https://stackoverflow.com/users/3128652/vaibhav-jain">Vainbhav Jain's</a> <a href="https://stackoverflow.com/a/37117135/130638">answer</a>.</p>
</blockquote>


blocks|key|267250|text|draw.io使用的mxGraph通过其Grapheditor+example支持此用例。Documentation.+Examples.|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|267251|267252|此答案基于Vainbhav+Jain's+answer。|blockquote|267253|267254|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jgraph/drawio|1|https://github.com/jgraph/mxgraph|2|https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html|3|https://jgraph.github.io/mxgraph/|4|https://jgraph.github.io/mxgraph/javascript/index.html|5|https://stackoverflow.com/users/3128652/vaibhav-jain|6|https://stackoverflow.com/a/37117135/130638^0|0|7|0|A|7|1|K|J|2|19|E|3|1O|9|4|0|0|5|F|5|L|6|6|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]|$A|19|B|1A|1|1B]|$A|1C|B|1D|1|1E]|$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|1J|8|@]|9|@$A|1K|B|1L|1|1M]|$A|1N|B|1O|1|1P]]|C|$]]|$1|H|3|-4|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1R|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]|S|$5|L|M|N|C|$O|T]]|U|$5|L|M|N|C|$O|V]]|W|$5|L|M|N|C|$O|X]]|Y|$5|L|M|N|C|$O|Z]]|10|$5|L|M|N|C|$O|11]]]]

<p><a href="https://github.com/jgraph/mxgraph" rel="nofollow noreferrer">mxGraph</a> — used by <a href="https://github.com/jgraph/drawio" rel="nofollow noreferrer">draw.io</a> — supports this use case, with its <a href="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html" rel="nofollow noreferrer">Grapheditor example</a>. <a href="https://jgraph.github.io/mxgraph/" rel="nofollow noreferrer">Documentation.</a> <a href="https://jgraph.github.io/mxgraph/javascript/index.html" rel="nofollow noreferrer">Examples.</a></p>

<blockquote>
  <p>This answer is based off of <a href="https://stackoverflow.com/users/3128652/vaibhav-jain">Vainbhav Jain's</a> <a href="https://stackoverflow.com/a/37117135/130638">answer</a>.</p>
</blockquote>


blocks|key|2960822|text|Cytoscape的Architecture+example支持这一点，它支持拖动元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2960823|对于创建连接，有edgehandles扩展。It+does+not+yet+support+editing+existing+connections.+Question.|2960824|对于编辑连接形状，有edge-editing扩展。Demo.|2960825|edit-editation扩展看起来很有前途，但是还没有演示。|2960826|entityMap|0|LINK|mutability|MUTABLE|url|http://js.cytoscape.org/|1|http://js.cytoscape.org/demos/architecture/|2|https://github.com/cytoscape/cytoscape.js-edgehandles|3|https://github.com/cytoscape/cytoscape.js-edgehandles/issues/18|4|https://gitter.im/cytoscape/cytoscape.js?at=5be0c06aaa58bd167447c794|5|https://github.com/iVis-at-Bilkent/cytoscape.js-edge-editing|6|https://rawgit.com/iVis-at-Bilkent/cytoscape.js-edge-bend-editing/master/demo.html|7|https://github.com/sitnarf/cytoscape.js-edge-editation^0|0|9|0|A|K|1|0|8|B|2|M|1H|3|24|9|4|0|A|C|5|P|5|6|0|0|E|7|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]|$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]|$A|1G|B|1H|1|1I]|$A|1J|B|1K|1|1L]]|C|$]]|$1|F|3|G|5|6|7|1M|8|@]|9|@$A|1N|B|1O|1|1P]|$A|1Q|B|1R|1|1S]]|C|$]]|$1|H|3|I|5|6|7|1T|8|@]|9|@$A|1U|B|1V|1|1W]]|C|$]]|$1|J|3|-4|5|6|7|1X|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]|T|$5|M|N|O|C|$P|U]]|V|$5|M|N|O|C|$P|W]]|X|$5|M|N|O|C|$P|Y]]|Z|$5|M|N|O|C|$P|10]]|11|$5|M|N|O|C|$P|12]]|13|$5|M|N|O|C|$P|14]]]]

<p><a href="http://js.cytoscape.org" rel="nofollow noreferrer">Cytoscape</a> supports this with its <a href="http://js.cytoscape.org/demos/architecture/" rel="nofollow noreferrer">Architecture example</a> which supports dragging elements.</p>

<p>For creating connections, there is the <a href="https://github.com/cytoscape/cytoscape.js-edgehandles" rel="nofollow noreferrer">edgehandles</a> extension. <a href="https://github.com/cytoscape/cytoscape.js-edgehandles/issues/18" rel="nofollow noreferrer">It does not yet support editing existing connections.</a> <a href="https://gitter.im/cytoscape/cytoscape.js?at=5be0c06aaa58bd167447c794" rel="nofollow noreferrer">Question.</a></p>

<p>For editing connection shapes, there is the <a href="https://github.com/iVis-at-Bilkent/cytoscape.js-edge-editing" rel="nofollow noreferrer">edge-editing</a> extension. <a href="https://rawgit.com/iVis-at-Bilkent/cytoscape.js-edge-bend-editing/master/demo.html" rel="nofollow noreferrer">Demo.</a></p>

<p>The <a href="https://github.com/sitnarf/cytoscape.js-edge-editation" rel="nofollow noreferrer">edit-editation</a> extension seems promising, however there is no demo yet.</p>


blocks|key|263721|text|VisJS的Arrows+example支持这一点，它支持可拖动的元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|263722|它还通过其Interaction+Events+example支持可编辑的连接。|263723|entityMap|0|LINK|mutability|MUTABLE|url|http://visjs.org/|1|http://visjs.org/examples/network/edgeStyles/arrows.html|2|http://visjs.org/examples/network/events/interactionEvents.html^0|0|5|0|6|E|1|0|5|Q|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]|$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]]]

<p><a href="http://visjs.org" rel="nofollow noreferrer">VisJS</a> supports this with its <a href="http://visjs.org/examples/network/edgeStyles/arrows.html" rel="nofollow noreferrer">Arrows example</a>, that supports draggable elements.</p>

<p>It also supports editable connections, with its <a href="http://visjs.org/examples/network/events/interactionEvents.html" rel="nofollow noreferrer">Interaction Events example</a>.</p>


blocks|key|267302|text|正如其getting+started+guide所示，js-graph.it支持此用例，支持在没有连接重叠的情况下拖动元素。它似乎不支持编辑/创建连接。它似乎不再被维护了。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|267303|entityMap|0|LINK|mutability|MUTABLE|url|http://js-graph-it.sourceforge.net/gettingstarted_6.html|1|https://sourceforge.net/projects/js-graph-it/^0|3|L|0|R|B|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p><a href="https://sourceforge.net/projects/js-graph-it/" rel="nofollow noreferrer">js-graph.it</a> supports this use case, as seen by its <a href="http://js-graph-it.sourceforge.net/gettingstarted_6.html" rel="nofollow noreferrer">getting started guide</a>, supporting dragging elements without connection overlaps. Doesn't seem like it supports editing/creating connections. Doesn't seem it is maintained anymore.</p>


blocks|key|3174646|text|最近，我试图开发一个简单的web应用程序，它使用拖放组件，并用线将它们连接起来。我偶然发现了这两个简单而令人惊叹的javascript库：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3174647|3174648|Plain+Draggable：简单和高性能的库，允许超文本标记语言/SVG元素被dragged.|ordered-list-item|offset|length|3174649|Leader+Line：在你的网页中画一条引线|3174650|3174651|Working+example+link+(用法:单击add+scene创建一个可拖动对象，单击add+choice在两个不同的可拖动对象之间绘制一条引线)|3174652|entityMap|0|LINK|mutability|MUTABLE|url|https://anseki.github.io/plain-draggable/|1|http://anseki.github.io/leader-line/|2|https://cherub7.github.io/Story-graph/pages/story_builder.html^0|0|0|0|F|0|0|0|B|1|0|0|0|K|2|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|10|8|@]|9|@$F|11|G|12|1|13]]|A|$]]|$1|H|3|I|5|E|7|14|8|@]|9|@$F|15|G|16|1|17]]|A|$]]|$1|J|3|-4|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|19|8|@]|9|@$F|1A|G|1B|1|1C]]|A|$]]|$1|M|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]|W|$5|P|Q|R|A|$S|X]]]]

<p>Recently, I have tried to develop a simple web app that uses drag and drop components and has lines connecting them. I came across these two simple and amazing javascript libraries:</p>
<ol>
<li><a href="https://anseki.github.io/plain-draggable/" rel="noreferrer">Plain Draggable</a>: simple and high performance library to allow HTML/SVG element to be dragged.</li>
<li><a href="http://anseki.github.io/leader-line/" rel="noreferrer">Leader Line</a>: Draw a leader line in your web page</li>
</ol>
<p><a href="https://cherub7.github.io/Story-graph/pages/story_builder.html" rel="noreferrer">Working example link</a> (usage: click on add scene to create a draggable, click on add choice to draw a leader line between two different draggables)</p>


<p>How can I draw a line between two or more elements to connect them? Any combination of HTML/CSS/JavaScript/SVG/Canvas is fine.</p>
<p>If your answer supports any of these, then do mention it:</p>
<ul>
<li>draggable elements</li>
<li>draggable/editable connections</li>
<li>element overlap avoidance</li>
</ul>
<blockquote>
<p>This question has been updated to <a href="https://stackoverflow.com/questions/linked/6278152">consolidate the numerous variations</a> of it.</p>
</blockquote>


Draw a connecting line between two elements

jQuery

如何在两个或更多元素之间绘制一条线来连接它们？HTML/CSS/JavaScript/SVG/Canvas的任意组合都可以。如果你的答案支持其中的任何一个，那么一定要提到它：draggable elementsdraggable/editable connectionselement overlap (使用可拖动的重叠...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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