interact.createSnapGrid from current position

[razvanphp]

First of all, thank you for this great library, I will finally get rid of jQuery UI in my project.

After some struggle to port my draggable to interact.js, I found out a case that probably should be included in the lib core.

Since I have my own grid displayed on the page already, and the object is already positioned correctly, I want to snap relative to the current position of the item and the parent, and not the page itself.

Currently I solved it by providing an offset with $('object').parent().offset().top but this seems hacky.

jQuery UI has this assumed by default when you specify a grid. Also it accepts one coordinate to be 0, so that it snaps only in one direction. Hope you can provide this functionality too for easier learning curve.

Cheers!

[taye]

I can't be very sure of what you're doing without seeing a working demo, but the Interactable#origin setting might be what you need.

interact(target).origin('parent');

[razvanphp]

Yes, this is what I mean, it works, but in my case I still have to add offset 1px because of the border.

What I wanted to say, is that the snap option should allow the possibility to build the grid (40x40 for example) starting from the current position of the item. Right now, it calculates and draws the grid starting from the origin top position.

To be more plastic, what I want to achieve is a 40x40 grid with the first move to be exactly 40 px up or down. Currently the first move is less, until the item position is synchronised with the actual grid, and the it moves fine.

I can create a fiddle if it is still not clear enough.

[max-mykhailenko]

Have same issue. @razvanphp do you solved that?

[razvanphp]

Not really, @taye solution with origin breaks my other code, since event.dy returns some negative big values instead of multiple of grid size.

So current workaround is to use interact.createSnapGrid({offset: {x: 0, y: 175}}) and try to overlap the virtual grid with your wished movement steps.

[taye]

I've made self an accepted value for snap offset. It works a lot like the startCoords value but uses the top-left of the target element at the start of the action instead of the pointer coordinates.

interact(target).draggable({
  snap: { offset: 'self', ... }
});