How to connect draggable divs

Question

I have some divs that I clone and can drag and drop in a area, now, I want to connect by lines the divs and if I move the divs, this lines must move too. Something like a flow diagram, I clone the divs using drag and drop, but still don't know how to do this lines.

Thanks!

Answer 1

you can use jsplumb library to achieve this. if you have two divs, div1 and 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' }
});

this should establish the connectors. if your divs are movables, then onmove, make a call to jsPlumb.repaint()

Link to jsPlumb demo - https://jsplumbtoolkit.com Jsplumb seems to have become paid now, (revised link above). However they do have a Community Edition

Community Edition This is the open source jsPlumb project hosted on GitHub that was first created in early 2010. It is a view layer technology that provides you with an API to establish connectivity between DOM elements, both programmatically and via mouse/touch events.

The Community Edition is free, and is licensed with an MIT or GPL2 license; you choose whichever suits your needs.

Toolkit Edition The Toolkit Edition wraps the Community edition with a focus on the underlying data model, as well as several useful UI features such as layouts, and a widget that offers pan/zoom functionality. It provides a fast way of building applications with visual connectivity at their core. To get a better feel for the capabilities of the Toolkit Edition, take a look through some of the demos or peruse the documentation.

The Toolkit Edition has a commercial, per-developer, license with optional access to email support (plus updates to new released versions for a year). License terms are available here. Feel free to jump in and buy a license right now using this form!

Roadmaps for both editions can be viewed here.