Snap to fixed position after inertia

[mathew-kurian]

How do we snap to a certain position once the drag position reaches some distance away from the snap point?

i.e. In the drag progress bar example you have, if you reach near 0 - 5%, then it will snap to 0% after the inertia bounce. Is it possible to have multiple snap points each snap point consisting of a position and a radius (around the position for which element will be snapped into the position)

If this is not a feature already, I can try and add it in.

[taye]

I think that for what you described can use either anchor or path mode:

interact(element).snap({
    mode: 'anchor',
    anchors: [
        { x:  0, y: 0, range: 10 },
        { x: 20, y: 0, range:  5 },
        ...
    ]
});

Using path functions gives you the greatest control as you can have multiple functions and can return whatever snap coordinates you want.

interact(element).snap({
    mode: 'path',
    paths: [
        // x and y args are the unsnapped coordinates
        function (x, y) {
            // return an object with x, y and/or range properties
        },
        ...
    ]
});

I'm not sure that I fully understand what you're describing. If I haven't answered your question please give me some more details.

[taye]

Here is the documentation for the different snapping settings: http://interactjs.io/docs/#Interactable.snap

[taye]

Is this still an issue for you? If it is can you provide some more information otherwise this issue can be closed?

[sbulink]

Hi @taye, ive been trying to rerun the snap to grid function, after performing a drag move with a new element to the grid, so that all elements (children of parent div), align to grid. As now elements stack on top of each other not only next to each other,

[sbulink]

++great lightweight library by the way,