NAV Navbar
javascript

Snapping

interact(target)
  .draggable({
    snap: { /* snap options */ }
  })
  .resizable({
    snap: { /* snap options */ }
  });

Drag and resize coordinates can be snapped to specific points defined by objects and functions in the snap targets array.

targets

The elements of this array can be any combination of points and functions which return points to snap to. If there are multiple snap targets, then the nearest snap target that is in range is used.

Point targets

interact(element).resizable({
  snap: {
    targets: [
      // snap to the point (0, 450)
      { x: 0, y: 450, range: 50 },

      // snap only the y coord to 100
      // i.e. move horizontally at y=100
      { y: 100, range: Infinity }
    ]
  }
});

A snap target can be an object with x, y and range properties. If a target specifies a coordinate in only one axis then snapping will be on a line.

If a target is defined as { y: 100, range Infinity } then the snapped movement will be horizontal at (100, pageX).

Function targets

interact(element).draggable({
  snap: { targets: [
    // 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 };  
    }
  ]}
})

If a snap target is a function, then it called and given the pageX and pageY coordinates of the event. If the function returns an object, that function is used like a point target.

Snap grids

var gridTarget = interact.createSnapGrid({
  x: 50, 
  y: 50, 
  range: 10,
  offset: { x: 5, y: 10 }
});

Use the interact.createSnapGrid method to create a target that snaps to a grid. The method takes an object describing a grid and returns a function that snaps to the corners of that grid.

The properties of the grid are:

range

interact(element).draggable({
  snap: {
    targets: [
      { x: 20, y: 450, range: 50 }
      { x: 10, y: 0 /* use default range below */},
    ],
    range: 300 // for targets that don't specify a range
  }
});

The range of a snap target is the distance the pointer must be from the target’s coordinates for a snap to be possible.

i.e. inRange = distance <= range.

If a snap target doesn’t have it’s own range, the default range is used.

relativePoints

interact(element).drggable({
  snap: {
    targets: [ { x: 300, y: 300 } ],
    relativePoints: [
      { x: 0  , y: 0   },   // snap relative to the element's top-left,
      { x: 0.5, y: 0.5 },   // to the center
      { x: 1  , y: 1   }    // and to the bottom-right
    ]
  }
});

If you want to specify points on the element which snapping should be relative to, then use an array of relativePoints. Each item in the array should be an object with x and y properties which are scalars specifying the position on the element to which snapping should be relative. If no relativePoints array is specified or the array is empty then snapping is relative to the pointer coordinates (default).

There are effectively targets.length * max( relativePoints.length, 1 ) snap targets while snap calculations are done. Snap functions are called multiple times with the coordinates of each relativePoint.

offset

interact(element)
  .drggable({
    snap: {
      targets: [ { x: 300, y: 300 } ],

      offset: { x: 20, y: 20 }
    }
  })
  .resizable({
    snap: {
      targets: [ { x: 300, y: 300 } ],
      offset: 'startCoords'
    }
  });

A snap offsets lets you shift the coordinates of all snap targets by the x and y properties of a given object or if the string 'startCoords' is given, then pageX and pageY at the start of the action are used.

endOnly

interact(element).draggable({
  snap: {
    targets: [/* ... */],
    endOnly: true
  }
});

The endOnly option is used to snap just before the end of a drag or resize. Before the end event is fired, an extra <action>move event is snapped and fired.

If inertia is enabled and endOnly is set to true then the pointer will follow a curve to the snap target.