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

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

如果你的回答支持以上任何一种说法，那么一定要提到:

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

这个问题已经更新到 合并众多的变化了。

218293 次浏览
小开
最佳答案

JsPlumb 是一个支持拖放的选项，如其 无数的演示(包括 流程图演示)所示。

它有一个免费的社区版本和一个付费的工具包版本。

Toolkit 版本将 Community 版本包装为一个全面的数据绑定层，以及几个用于为流行库构建应用程序和集成的 UI 小部件，并且获得了商业许可。

小开

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

使用一条线连接两个 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)之间画一条线。(参考参观学校)我们还没有具体说明。因为我们将使用 jQuery 来编辑行标记的属性(x1，y1，x2，y2)。

  3. 用 <script>标签写

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

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

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

    JQueryposition()方法允许我们获取元素的当前位置。有关更多信息，请访问 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()方法用于更改所选元素的属性。

我们在上一行中所做的就是将 line 的属性从

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) ..。

现在线标签有两个不同的坐标来在两点之间画线。

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

提示: 在脚本标记中编写任何内容之前，请确保先导入 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>

小开

几天前我也有同样的要求

我使用了完整的 宽度和 身高Svg，并在所有 div 下面添加了它，并动态地将 台词添加到这些 svg 中。

看看我是如何使用 Svg做到这一点的

超文本标示语言

<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);
});
小开

Raphaël 以其 格栅的例子支持这一点。

这个答案是基于 阿瓦伊斯 · 阿赫塔尔的 回答和 Vaibhav Jain 的 回答。

小开

D3 有 数以百计的例子，其中一些适合这个问题。

没有拖放的例子，这是固定的:

没有拖放的交互式示例:

拖放示例:

这个答案是基于 Glenn Dayton 的 回答。

小开

GoJS 支持这一点，它的 国家图表的例子支持拖放元素和编辑连接。

这个答案是基于 沃尔特 · 诺斯伍德家 回答。

小开

JointJS/Rappid 通过它的 Kitchensink 的例子支持这个用例，它支持元素的拖放和连接的重新定位。它有很多例子。

这个答案是基于 Vainbhav Jain 的 回答。

小开

由 画吧，画吧使用的 mxGraph ーー支持这个用例，它的 图形编辑器示例。 文件。 < a href = “ https://jgrap.github.io/mxGraph/javascript/index.html”rel = “ nofollow noReferrer”> 示例。

这个答案是基于 Vainbhav Jain 的 回答。

小开

Cytoscape 支持这一点，它的 建筑学例子支持拖动元素。

为了创建连接，有一个 边缘把手扩展名

对于编辑连接形状，有一个 边缘编辑扩展名

编辑-编辑的扩展看起来很有希望，但是还没有演示。

小开

VisJS 通过其支持可拖动元素的 箭头的例子支持这一点。

它还支持可编辑连接，其 交互事件示例。

小开

Js-graph.它 支持这个用例，如它的 开始指南所示，支持没有连接重叠的拖动元素。它似乎不支持编辑/创建连接。好像已经没有维护了。

小开

最近，我试图开发一个简单的网络应用程序，使用拖放组件，并有线连接他们。我偶然发现了这两个简单而神奇的 javascript 库:

  1. 普通的 Dragable : 简单而高性能的库，允许拖动 HTML/SVG 元素。
  2. 领导线 : 在你的网页上画一条领导线

工作示例链接 (用法: 点击添加场景创建一个 Draggable，点击添加选项在两个不同的 Draggables 之间绘制一条前导线)


提交答案