I am seeking a gratis solution to this six year old S.O question (which still has no accepted answer, and the most upvoted costs AUD 3.5k (although there is a community edition with very limited features)).

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.

So, the idea is clear enough: two divs with a line between them. If I drag one of them, the connecting line must stay connected. See a demo here.

The connecting line must be smart enough to change its connection point. See the demo and drag "start" to the right". When you load the page, it has a connecting line to the next div on its right hand side. If you drag it over to the right of that div, the connecting line remains, but is now on the left side (similarly, top, bottom and corners).

Lines from the 4 centres of edges will suffice, although I would strongly prefer corners too.

Integration with AngularJs 1.x would be very welcome.


I am using this answer as a scratchpad area to collect my research, in case it helps anyone else.


Ignore a problem long enough and it will solve itself.

JSPlumb now has a community edition. Yay !!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.