Enable Drag and Drop everywhere in a <div> on a Grid

[holtergram]

Hey,

thanks so much for this project!
Looks great so far and I'm looking forward to everything that's coming. 🚀

While using Milanote.com I was thinking if there's a way for you to add some kind of micro-grid (every X pixels) in a HTML canvas via <div class="canvas" style="position: relative; height: 1000px; width: 2000px"> (note: not <canvas>) where one would be able to drop elements and they'd autoalign (via top & left pixel values).

Milanote is using react-dnd for this and unfortunately there is no package for Vue 3 that comes even close to the features it ships. And I don't know how actively maintainer vue-draggableis. But if you can make something like this, that'd be really awesome.

Just a suggestion. 😊

[amendx]

Hi, @holtergram that is indeed a nice feature, but can you tell me how'd you imagine the auto alignment? Can you show me an example or so?

[holtergram]

Hey,
auto-alignment might be a confusing term. I mean that the element snaps to the nearest grid rows and columns. So that it's easy to align multiple elements in the div because they can snap to the same grid. So when you drop atleft: 323px; top: 626px it becomes left: 320px; top: 630px. I hope that makes it clear.
If you're keen, you can try their App and that should show you quickly what I mean. :)

Is that a feature you'd be interested in or is it rather out of scope?

Thanks 🙌🏼