jQuery: draggable with following line: a visual "link these two things" indicator

Question

In Adobe AfterEffects, you can link layers to one another with the "parenting" tool. (I guess that's what it's called, it's been a while.) You click and hold the icon, then drag it to the destination. As a visual indicator, it draws a line from the parent to the mouse pointer.

Draggable/droppable/helper icon...I've got all that. What I can't find information on - mostly because I can't find Google search terms that get there - is how to draw a line that anchors on one end while the other end follows the mouse pointer around.

Update: HTML5 Canvas is probably not the way, because it completely covers whatever's underneath it. So I'm back to square #1.

Picture to show what the final product would look like:

Answer 1

There's a great solution here, using SVG. I will also post the code from the author, @Ani.

Procedure to join two divs using a line :

create two divs and give them any position as you need

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>

(for the sake of explanation I am doing some inline styling but it is always good to make a separate css file for styling)

<svg><line id="line1"/></svg>

Line tag allows us to draw a line between two specified points(x1,y1) and (x2,y2). (for a reference visit w3schools.) we haven't specified them yet. because we will be using jQuery to edit the attributes (x1,y1,x2,y2) of line tag.

in tag write

line1 = $('#line1');   
div1 = $('#div1');   
div2 = $('#div2');

I used selectors to select the two divs and line...

var pos1 = div1.position();
var pos2 = div2.position();

jQuery position() method allows us to obtain the current position of an element. For more information, visit https://api.jquery.com/position/ (you can use offset() method too)

Now as we have obtained all the positions we need we can draw line as follows...

line1
  .attr('x1', pos1.left)
  .attr('y1', pos1.top)
  .attr('x2', pos2.left)
  .attr('y2', pos2.top);

jQuery .attr() method is used to change attributes of the selected element.

All we did in above line is we changed attributes of line from

x1 = 0
y1 = 0
x2 = 0
y2 = 0

to

x1 = pos1.left
y1 = pos1.top
x2 = pos2.left
y2 = pos2.top

as position() returns two values, one 'left' and other 'top', we can easily access them using .top and .left using the objects (here pos1 and pos2)

Now line tag has two distinct co-ordinates to draw line between two points.