Returns or sets if and how action coordinates are snapped. By
default, snapping is relative to the pointer coordinates. You can
change this by setting the
elementOrigin.
Returns:
boolean
object
false if snap is disabled; object with snap properties if snap is enabled
or
- options
object boolean null
Returns:
Interactable
this Interactable
Usage
interact('.handle').snap({
mode : 'grid', // event coords should snap to the corners of a grid
range : Infinity, // the effective distance of snap ponts
grid : { x: 100, y: 100 }, // the x and y spacing of the grid points
gridOffset : { x: 0, y: 0 }, // the offset of the grid points
});
interact('.handle').snap({
mode : 'anchor', // snap to specified points
anchors : [
{ x: 100, y: 100, range: 25 }, // a point with x, y and a specific range
{ x: 200, y: 200 } // a point with x and y. it uses the default range
]
});
interact(document.querySelector('#thing')).snap({
mode : 'path',
paths: [
{ // snap to points on these x and y axes
x: 100,
y: 100,
range: 25
},
// give this function the x and y page coords and snap to the object returned
function (x, y) {
return {
x: x,
y: (75 + 50 * Math.sin(x * 0.04)),
range: 40
};
}]
})
interact(element).snap({
// do not snap during normal movement.
// Instead, trigger only one snapped move event
// immediately before the end event.
endOnly: true,
// https://github.com/taye/interact.js/pull/72#issue-41813493
elementOrigin: { x: 0, y: 0 }
});