Grid Snap Not Working? about neodrag HOT 9 CLOSED

Seems good to me. I think I can expose a domRect property in all the events

from neodrag.

Should be fixed now.

About the domRect, I will make a release soon with the fix and this feature included

from neodrag.

Can you make svelte REPL of this example please?

from neodrag.

I figured it out! I interpreted the grid array to be the number of grid divisions (i.e. a 2x2 grid), not the pixel dimensions of each grid block (i.e. an infinite grid with snap points every 2px vertically and 2px horizontally). I would clarify that in the docs for other naive users.

from neodrag.

Thanks, ill update the docs

from neodrag.

I did encounter a second, somewhat related issue though: When using a defined grid, I can't move an item back to its original position. If I move an item from its [0, 0] position, I can't move it back to that origin.
REPL

Am I not setting something correctly?

from neodrag.

Yur right, it's definitely a bug. I'll look into it.

from neodrag.

Thanks for checking it out. I also noticed that when dragging two items on top of each other, they can end up having very slightly different translation distances (different by ~1px or less than a pixel). I think this is a subpixel calculation/rendering difference across browsers.

I was trying to detect if two elements were overlapping after a drag event (so I could move one of them out of the way), but I wasn't getting consistent results when I dragged items on top of each other. This might be easier if the onDragEnd event returned the expected Cartesian coordinates of the element (i.e. the grid [x,y] coordinates, not just the translation offset). Since the user already provides the pixel size of the grid blocks, returning the coordinates should be relatively trivial.

So, if the user provides a grid of [50, 50] in a bounded container that has a width of 250px, and a height of 150px, you might get coordinates that look like this:

Then a user could store the coordinates returned from the onDragEnd event and check if they match another draggable item's stored coordinates, rather than checking the pixels from getBoundClientRect() or parsing out the element.style.transform. Instead of comparing offsetX: 534.4325..., offsetY: 200.250... and offsetX: 534.8762..., offsetY: 200.501..., I could just compare x: 4, y: 1 and x: 4, y: 1.

What do you think?

from neodrag.

Released in 2.5.0

from neodrag.