Interactable

Gets the selector context Node of the Interactable. The default is window.document.

Returns or sets the mouse coordinate types used to calculate the movement of the pointer.

interact(element).draggable({
    onstart: function (event) {},
    onmove : function (event) {},
    onend  : function (event) {},

    // the axis in which the first movement must be
    // for the drag sequence to start
    // 'xy' by default - any direction
    startAxis: 'x' || 'y' || 'xy',

    // 'xy' by default - don't restrict to one axis (move in any direction)
    // 'x' or 'y' to restrict movement to either axis
    // 'start' to restrict movement to the axis the drag started in
    lockAxis: 'x' || 'y' || 'xy' || 'start',

    // max number of drags that can happen concurrently
    // with elements of this Interactable. Infinity by default
    max: Infinity,

    // max number of drags that can target the same element+Interactable
    // 1 by default
    maxPerElement: 2
})

var isDraggable = interact('element').draggable(); // true

Get or set whether drag actions can be performed on the target

interact(target)
.dropChecker(function(dragEvent,         // related dragmove or dragend event
                      event,             // TouchEvent/PointerEvent/MouseEvent
                      dropped,           // bool result of the default checker
                      dropzone,          // dropzone Interactable
                      dropElement,       // dropzone elemnt
                      draggable,         // draggable Interactable
                      draggableElement) {// draggable element

  return dropped && event.target.hasAttribute('allow-drop')
}

interact('.drop').dropzone({
  accept: '.can-drop' || document.getElementById('single-drop'),
  overlap: 'pointer' || 'center' || zeroToOne
}

Returns or sets whether draggables can be dropped onto this target to trigger drop events

Dropzones can receive the following events:

• dropactivate and dropdeactivate when an acceptable drag starts and ends
• dragenter and dragleave when a draggable enters and leaves the dropzone
• dragmove when a draggable that has entered the dropzone is moved
• drop when a draggable is dropped into this dropzone

Use the accept option to allow only elements that match the given CSS selector or element. The value can be:

• an Element - only that element can be dropped into this dropzone.
• a string, - the element being dragged must match it as a CSS selector.
• null - accept options is cleared - it accepts any element.

Use the overlap option to set how drops are checked for. The allowed values are:

• 'pointer', the pointer must be over the dropzone (default)
• 'center', the draggable element's center must be over the dropzone
• a number from 0-1 which is the (intersection area) / (draggable area). e.g. 0.5 for drop to happen when half of the area of the draggable is over the dropzone

Use the checker option to specify a function to check if a dragged element is over this Interactable.

Calls listeners for the given InteractEvent type bound globally and directly to this Interactable

interact(element).gesturable({
    onstart: function (event) {},
    onmove : function (event) {},
    onend  : function (event) {},

    // limit multiple gestures.
    // See the explanation in Interactable.draggable example
    max: Infinity,
    maxPerElement: 1,
})

var isGestureable = interact(element).gesturable()

Gets or sets whether multitouch gestures can be performed on the target

The default function to get an Interactables bounding rect. Can be overridden using Interactable.rectChecker.

Removes an InteractEvent, pointerEvent or DOM event listener.

Binds a listener for an InteractEvent, pointerEvent or DOM event.

Gets or sets the origin of the Interactable's element. The x and y of the origin will be subtracted from action event coordinates.

Returns or sets the function used to calculate the interactable's element's rectangle

const interactable = interact(target)
const drag = { name: drag, axis: 'x' }
const resize = { name: resize, edges: { left: true, bottom: true }

interactable.reflow(drag)
interactable.reflow(resize)

Start an action sequence to re-apply modifiers, check drops, etc.

interact(element).resizable({
  onstart: function (event) {},
  onmove : function (event) {},
  onend  : function (event) {},

  edges: {
    top   : true,       // Use pointer coords to check for resize.
    left  : false,      // Disable resizing from left edge.
    bottom: '.resize-s',// Resize if pointer target matches selector
    right : handleEl    // Resize if pointer target is the given Element
  },

    // Width and height can be adjusted independently. When `true`, width and
    // height are adjusted at a 1:1 ratio.
    square: false,

    // Width and height can be adjusted independently. When `true`, width and
    // height maintain the aspect ratio they had when resizing started.
    preserveAspectRatio: false,

  // a value of 'none' will limit the resize rect to a minimum of 0x0
  // 'negate' will allow the rect to have negative width/height
  // 'reposition' will keep the width/height positive by swapping
  // the top and bottom edges and/or swapping the left and right edges
  invert: 'none' || 'negate' || 'reposition'

  // limit multiple resizes.
  // See the explanation in the Interactable.draggable example
  max: Infinity,
  maxPerElement: 1,
})

var isResizeable = interact(element).resizable()

Gets or sets whether resize actions can be performed on the target

Reset the options of this Interactable

Remove this interactable from the list of interactables and remove it's action capabilities and event listeners