javascript - 如何连接可拖动的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.comJsplumb 现在似乎已经付费(修改了上面的链接)。但是他们确实有一个 Community Edition

社区版这是托管在 GitHub 上的开源 jsPlumb 项目，最初于 2010 年初创建。它是一种 View 层技术，可为您提供 API 以编程方式和通过鼠标/触摸事件建立 DOM 元素之间的连接。

社区版是免费的，并获得 MIT 或 GPL2 许可；您可以选择适合您需要的那个。

工具包版本Toolkit Edition 对 Community Edition 进行了包装，重点关注底层数据模型，以及一些有用的 UI 功能，例如布局，以及提供平移/缩放功能的小部件。它提供了一种快速构建以视觉连接为核心的应用程序的方法。要更好地了解 Toolkit Edition 的功能，请查看一些演示或仔细阅读文档。

Toolkit Edition 有一个针对开发人员的商业许可证，可以选择访问电子邮件支持(加上对新发布版本的一年更新)。许可条款可在此处获得。请随时使用此表格立即加入并购买许可证!

可以查看两个版本的路线图 here .