Drag n drop example

I was working on a project that includes a drag n drop feature where the user can drag items from a sidebar onto a canvas and move them around. I extracted the drag n drop part of it and made it into a simple example. It uses Models and Collections and sync persistence which essentially makes it into a collaborative connected app. Try running it and then opening a second viewer, e.g. in a browser, when you drag new shapes into the canvas and move them around the second viewer is updated in real time.

Here is the example:
Drag n drop example.zip (7.1 KB)


I’m building something quite similar to this, but with a grid-like snap.

Similar to jquery 20x20.

Any thoughts what might be a good approach to doing something like this? I’m being lazy here, since I haven’t done exploration for ways of doing it, just thought I’d ask before starting code research :slight_smile:


a simple expression for the drag layer
pos - ( pos % gridSize )