Interact.js: 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 https://github.com/taye/interact.js/issues/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!