Drawing a connecting line between two elements

javascript html connection line jquery-ui-draggable
Bakhtiyor picture Bakhtiyor · Jun 8, 2011 · Viewed 162.4k times · Source

How can I drawing a line between two or more elements to connect them? Any combination of HTML/CSS/JavaScript/SVG/Canvas is fine.

If your answer supports any of these, then do mention it:

  • draggable elements
  • draggable/editable connections
  • element overlap avoidance

This question has been updated to consolidate the numerous variations of it.

Answer

Tomasz Kowalczyk picture Tomasz Kowalczyk · Jun 8, 2011

jsPlumb is an option available that supports drag and drop, as seen by its numerous demos, including the Flowchart demo.

It is available in a free Community edition, and a paid Toolkit edition.

The Toolkit edition wraps the Community edition with a comprehensive data binding layer, as well as several UI widgets for building applications and integrations for popular libraries, and is commercially licensed.

Related questions

How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More