How to implement similar arrows in the web?

Question

JavaScript

How can you implement similar arrows between blocks on a web page? Arrows can be dragged to another block. they follow the floating block, and so on.

From the possible options, I imagine (vaguely) svg or canvas (did not really work with both things), located behind the container with blocks. And control with the help of js, which stores the coordinates of blocks, arrows, and what is connected with what. When you click on a document, it checks if there is an arrow on the coordinates, if there is, it starts moving behind the cursor, if the next click on the block, the arrow is assigned to the block.

Answer 1

Raphael.js (SVG) - there is such functionality.

Answer 2

jointjs
It's true that developers are promoting their new framework, rappid, but for diagrams with arrows, free jointjs will suffice.