Snap Grid snaps to incorrect places with restricting

[Aetherpoint]

Hi! Been really loving interact.js, thanks so much for providing it - it's clear and easy to use.

For some reason though when creating a snap grid with a restriction, the draggable item seems to fall outside the grid proportions. Have a fiddle here: http://jsfiddle.net/uhf0m1jj/.

Wasn't sure if I was just doing something wrong? This may be related to or a duplicate of #208

Edit: Seems to be relating with any sort of shift in location of the drag area and event.dx returning odd values.

[taye]

The snapping of 30px divides neatly into the 300px .container so this issue isn't exactly the same as #208. The problem here is the offset of the .interactable caused by the body's margin. The solution would be to add origin: 'parent' to the draggable options, but that doesn't work for v1.2.9 so you'll also have to upgrade to v1.3.0-rc.0. Unfortunately, moving outside the edge of the restriction is still buggy. I'll try to sort that out soon.

As a work around to the issue in the latest version, you can remove the restriction and instead set limits on the snap grid. https://jsfiddle.net/uhf0m1jj/13/

interact(".interactable")
    .draggable({
    		// the top left corner of the element will be (0, 0)
    		origin: 'parent',
        snap: {
            targets: [
                interact.createSnapGrid({
                    x: 30,
                    y: 30,
                    // limit to the container dimensions
                    limits: {
                        left: 0,
                        top: 0,
                        right: 300 - 30,
                        bottom: 300 - 30,
                    },
                })
            ],
            relativePoints: [
            	{ x: 0, y: 0 }
            ]
        },
    })
...

[taye]

The issue was easier to fix than I expected. https://jsfiddle.net/uhf0m1jj/14/

[Aetherpoint]

Awesome, thank you so much!

[darksnake747]

Incredibly helpful! Setting the origin to 'parent' fixed my issue as well. Such an easy fix. Thank you so much @taye for sharing!

[aderchox]

@taye In the current version of InteractJS, does this origin option still exist? I couldn't find it here: draggable(): DraggableOptions. I couldn't find it in the docs too. (I'm not sure if this fixes my issue though.)

I've encountered an issue where if the parent container has some padding, then snap grid of x: 50, y: 50 used in conjunction with restrictRect works but violates the grid when moving the draggable towards the leftmost (start) position and also when dragging it towards the rightmost (ending) position inside the container. The padding gets ignored and the draggable reaches the border of its container (touches it).
I can make a demo of this if needed, but basically this is all I have:

    draggableBox.draggable({
      lockAxis: "x",
      listeners: {
        move(event) {
          position.x += event.dx;
          position.y += event.dy;
          event.target.style.transform = `translate(${position.x}px, ${position.y}px)`;
        },
      },
      modifiers: [
        interact.modifiers.snap({
          targets: [
            interact.snappers.grid({
              x: 50,
              y: 50,
            }),
          ],
        }),
        interact.modifiers.restrictRect({
          restriction: ".board",
        }),
      ],
    });
  });