Use dragula to move objects over canvas

Question

I have a canvas with a background picture. I would like to have objects (buttons or divs) that can move over the canvas.

I have found the perfect solution with interact.js. The first example on the page (called Dragging) is exactly what I'd like to achieve. Get the position over the canvas and if the object is moved outside, it goes back inside automatically.

However, I'm already using dragula to sort items and would like to keep only one library for drag and drop functions. Adding another library would add more complexity to my webapp.

Is it "easy" to achieve that with dragula? If yes, how?

A code example is needed in order to understand how.

Kneecap

Answer 1

I had a similar requirement, where the left side items, turned into a sticky note on the right side. These sticky notes needed to be moved around.

After much thought, I devised a very simple solution. I created 4 seperate dropzones on the right side, which basically allows the notes to be moved around.

This ensures sorting as well as dragging functionality.

Reference video: https://youtu.be/_jsM1kn6nBk

Zurek