我有一些我克隆并可以在一个区域中拖放的div,现在,我想通过行连接div,如果我移动div,这条线也必须移动.像流程图一样,我使用拖放来克隆div,但仍然不知道如何做这些行.
谢谢！
解决方法
你可以使用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 demo – https://jsplumbtoolkit.com
Jsplumb现在似乎已经收到了付款,(上面的修订链接).但他们确实有Community Edition
社区版
这是在GitHub上托管的开源jsPlumb项目,该项目最初于2010年初创建.它是一种视图层技术,为您提供API,以编程方式和通过鼠标/触摸事件在DOM元素之间建立连接.
Community Edition是免费的,并获得MIT或GPL2许可;你选择哪个适合你的需求.
工具包版
Toolkit Edition包含社区版,重点关注底层数据模型,以及一些有用的UI功能,如布局,以及提供平移/缩放功能的小部件.它提供了一种快速构建应用程序的方法,其核心是可视连接.要更好地了解Toolkit Edition的功能,请查看一些演示或仔细阅读文档.
Toolkit Edition具有商业版,每个开发人员许可,可选择访问电子邮件支持(以及一年内新发布版本的更新).许可条款可在此处获得.请立即使用此表单立即加入并购买许可证！
这两个版本的路线图可以在here查看.