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!

have a look at this: http://neyric.github.com/wireit/examples/wires_and_terminals.html — Rumplin, Oct 24 '11 at 12:08
Possible duplicate of [Drawing a line between two divs](https://stackoverflow.com/questions/6278152/drawing-a-line-between-two-divs) — balupton, Nov 05 '18 at 21:00
After 6 years, I would still love to find a free solution to this. Although nowadays, of course, the question belongs on https://softwarerecs.stackexchange.com/ Maybe I will ask one there. — Mawg says reinstate Monica, Feb 08 '19 at 07:27
Done. See https://softwarerecs.stackexchange.com/questions/55974/how-to-connect-draggable-divs-gratis-alternative-to-jsplumb — Mawg says reinstate Monica, Feb 08 '19 at 07:39

Krishna · Answer 1 · 2017-03-28T13:21:22.453

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.

Lolx!! It [***starts*** at $3500](https://jsplumbtoolkit.com/purchase) !! — Mawg says reinstate Monica, Mar 24 '17 at 11:26
@Mawg - thats greedy, totally agree. we have stopped using this and replaced this with homegrown libraries — Krishna, Feb 07 '19 at 19:02
Well, that $3,500 is in ***Australian*** dollars, so may be slightly cheaper than I thought :-) You can also get a year's support for AUD 3k. So, I wish that your company would post your version to GitHub :-) — Mawg says reinstate Monica, Feb 08 '19 at 07:25
Yay !! JSPlumb now has a [community edition](https://github.com/jsplumb/jsplumb) !! — Mawg says reinstate Monica, Jun 17 '20 at 14:24

Caspar Kleijne · Answer 2 · 2011-01-13T20:19:58.627

sample

take two divs, divA and divB.
calculate the shortest distance between the closest borders of the divs
determine the middle coordinates of those closest sides of each div eg:

A: {x:10, y:10}

B: {x:20: y:10}
determine the intersection-point of lines from those points (C) C = AX, BY or AY,BX (depending on divA and divB positions)
create two divs, that represent AC and BC

tip:

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

repaint every time you move the divs with jquery.

note: as you can see, there are always 2 sides close and 2 sides far when the divs are not parallel.

score 0 · Answer 3 · answered Jan 13 '11 at 20:09

I've thought about this before but I've never had a need to actually try to implement it. Try this:

Create a transparent GIF or PNG that has a diagonal line running from one corner to another. As you drag the divs around, stretch the image so that it's corners are always touching each div. You will probably need a diagonal-down image and a diagonal-up image and switch between the two based on the relative positioning of the two divs.

This will probably take some finesse to get it working well, but it is the best thing that I can think of to get diagonal lines in HTML.

How to connect draggable divs

3 Answers3