如何连接可拖动的div

Question

我有一些我克隆并可以在一个区域中拖放的div,现在,我想通过行连接div,如果我移动div,这条线也必须移动.像流程图一样,我使用拖放来克隆div,但仍然不知道如何做这些行.

谢谢!

Answer 1

你可以使用jsplumb库来实现这一点.如果你有两个div,div1和div2,

var endpointOptions = { isSource:true, isTarget:true }; 
var div1Endpoint = jsPlumb.addEndpoint('div1', { anchor:"TopCenter" }, endpointOptions );  
var div2Endpoint = jsPlumb.addEndpoint('div2', { anchor:"BottomCenter" }, endpointOptions );  
jsPlumb.connect({ 
    source:div1Endpoint,
    target:div2Endpoint,
    connector: [ "Bezier", 175 ],
    paintStyle:{ lineWidth:5, strokeStyle:'red' }
});

这应该建立连接器.如果您的div是可移动的,那么在移动时,调用jsPlumb.repaint()

链接到jsPlumb演示 - https://jsplumbtoolkit.com Jsplumb现在似乎已经付费了,(上面的修订链接).但他们确实有一个社区版

Community Edition 这是在GitHub上托管的开源jsPlumb项目,该项目最初于2010年初创建.它是一种视图层技术,为您提供API,以编程方式和通过鼠标/触摸事件建立DOM元素之间的连接.

Community Edition是免费的,并获得MIT或GPL2许可; 你选择哪个适合你的需求.

Toolkit Edition Toolkit Edition包含社区版,重点关注底层数据模型,以及一些有用的UI功能,如布局,以及提供平移/缩放功能的小部件.它提供了一种快速构建应用程序的方法,其核心是可视连接.要更好地了解Toolkit Edition的功能,请查看一些演示或仔细阅读文档.

Toolkit Edition具有商业版,每个开发人员许可,可选择访问电子邮件支持(以及一年内新发布版本的更新).许可条款可在此处获得.请立即使用此表单立即加入并购买许可证!

这两个版本的路线图都可以在这里查看.

Answer 2

• 取两个 div，divA 和 divB。

• 计算div的最近边界之间的最短距离

• 确定每个 div 的最近边的中间坐标，例如：

  答：{x:10, y:10}

  B: {x:20: y:10}

• 从这些点确定线的交点 (C) C = AX, BY 或 AY,BX（取决于 divA 和 divB 位置）

• 创建两个 div，分别代表 AC 和 BC

提示：

position:absolute;
line-height:1px;
border:solid 1px;

每次使用 jquery 移动 div 时都重新绘制。

注意：如您所见，当 div 不平行时，总是有 2 边靠近和 2 边远离。

Answer 3

我以前曾考虑过这个问题，但从未需要真正尝试实现它。尝试这个：

创建一个透明的 GIF 或 PNG，其中有一条从一个角延伸到另一个角的对角线。当您拖动 div 时，拉伸图像，使其角始终接触每个 div。您可能需要一个对角向下的图像和一个对角向上的图像，并根据两个 div 的相对位置在两者之间切换。

这可能需要一些技巧才能使其正常工作，但这是我能想到的在 HTML 中获得对角线的最好的方法。