Connecting an element by dropping it over another element

This quick tutorial shows how to automatically create links when the user drops an element over another element. Note that this is not necessary if you have elements with ports. For more details on elements with ports, see the Working with Ports tutorial.

Let's start with a demo and then let's have a look on how this can be done.

Try to drag an element and drop it over another element. You should see a new link has been created between the two elements.

The trick is to listen on the element:pointerup event on the paper and search for an element whose area contains the point of the mouse cursor. If such an element was found, we just create a link connecting both elements and move the dropped element to the position before dragging (we stored this information on the element:pointerdown event) to give the user a clue of what just happend.