NAV

Interactable

Interactable

new Interactable()

Classes

Interactable

Members

_defaults

actionChecker

interact('.resize-drag')
  .resizable(true)
  .draggable(true)
  .actionChecker(function (pointer, event, action, interactable, element, interaction) {

    if (interact.matchesSelector(event.target, '.drag-handle')) {
      // force drag with handle target
      action.name = drag
    }
    else {
      // resize from the top and right edges
      action.name  = 'resize'
      action.edges = { top: true, right: true }
    }

    return action
})

Returns or sets the function used to check action to be performed on pointerDown

allowFrom

A drag/resize/gesture is started only If the target of the mousedown, pointerdown or touchstart event or any of it's parents match the given CSS selector or Element.

Deprecated:
  • Don't use this method. Instead set the `allowFrom` option for each action or for `pointerEvents` ```js interact(targett) .resizable({ allowFrom: '.resize-handle', .pointerEvents({ allowFrom: '.handle',, }) ```

ignoreFrom

If the target of the mousedown, pointerdown or touchstart event or any of it's parents match the given CSS selector or Element, no drag/resize/gesture is started.

Deprecated:
  • Don't use this method. Instead set the `ignoreFrom` option for each action or for `pointerEvents` ```js interact(targett) .draggable({ ignoreFrom: 'input, textarea, a[href]'', }) .pointerEvents({ ignoreFrom: '[no-pointer]', }) ```

preventDefault

Returns or sets whether to prevent the browser's default behaviour in response to pointer events. Can be set to:

  • 'always' to always prevent
  • 'never' to never prevent
  • 'auto' to let interact.js try to determine what would be best

styleCursor

Returns or sets whether the the cursor should be changed depending on the action that would be performed if the mouse were pressed and dragged.

Methods

context() → {Node}

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

Returns:
Type:
Node

The context Node of this Interactable

deltaSource(newValueopt) → {string|object}

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

Parameters:
NameTypeAttributesDescription
newValuestring <optional>

Use 'client' if you will be scrolling while interacting; Use 'page' if you want autoScroll to work

Returns:
Type:
string | object

The current deltaSource or this Interactable

draggable(optionsopt) → {boolean|Interactable}

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

Parameters:
NameTypeAttributesDescription
optionsboolean | object <optional>

true/false or An object with event listeners to be fired on drag events (object makes the Interactable draggable)

Returns:
Type:
boolean | Interactable

boolean indicating if this can be the target of drag events, or this Interctable

dropCheck()

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')
}

dropzone(optionsopt) → {object|Interactable}

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.

Parameters:
NameTypeAttributesDescription
optionsboolean | object | null <optional>

The new options to be set.

Returns:
Type:
object | Interactable

The current setting or this Interactable

fire(iEvent) → {Interactable}

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

Parameters:
NameTypeDescription
iEventInteractEvent

The InteractEvent object to be fired on this Interactable

Returns:
Type:
Interactable

this Interactable

gesturable(optionsopt) → {boolean|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

Parameters:
NameTypeAttributesDescription
optionsboolean | object <optional>

true/false or An object with event listeners to be fired on gesture events (makes the Interactable gesturable)

Returns:
Type:
boolean | Interactable

A boolean indicating if this can be the target of gesture events, or this Interactable

getRect(elementopt) → {Rect}

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

Parameters:
NameTypeAttributesDescription
elementElement <optional>

The element to measure.

Returns:
Type:
Rect

The object's bounding rectangle.

off(types, listeneropt, optionsopt) → {Interactable}

Removes an InteractEvent, pointerEvent or DOM event listener.

Parameters:
NameTypeAttributesDescription
typesstring | array | object

The types of events that were listened for

listenerfunction | array | object <optional>

The event listener function(s)

optionsobject | boolean <optional>

options object or useCapture flag for removeEventListener

Returns:
Type:
Interactable

This Interactable

on(types, listeneropt, optionsopt) → {Interactable}

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

Parameters:
NameTypeAttributesDescription
typesstring | array | object

The types of events to listen for

listenerfunction | array | object <optional>

The event listener function(s)

optionsobject | boolean <optional>

options object or useCapture flag for addEventListener

Returns:
Type:
Interactable

This Interactable

origin(originopt) → {object}

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

Parameters:
NameTypeAttributesDescription
originElement | object | string <optional>

An HTML or SVG Element whose rect will be used, an object eg. { x: 0, y: 0 } or string 'parent', 'self' or any CSS selector

Returns:
Type:
object

The current origin or this Interactable

rectChecker(checkeropt) → {function|object}

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

Parameters:
NameTypeAttributesDescription
checkerfunction <optional>

A function which returns this Interactable's bounding rectangle. See Interactable.getRect

Returns:
Type:
function | object

The checker function or this Interactable

reflow(action) → {Promise}

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.

Parameters:
NameTypeDescription
actionObject

The action to begin

NameTypeDescription
namestring

The name of the action

Returns:
Type:
Promise

A promise that resolves to the Interactable when actions on all targets have ended

resizable(optionsopt) → {boolean|Interactable}

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

Parameters:
NameTypeAttributesDescription
optionsboolean | object <optional>

true/false or An object with event listeners to be fired on resize events (object makes the Interactable resizable)

Returns:
Type:
boolean | Interactable

A boolean indicating if this can be the target of resize elements, or this Interactable

set(options) → {object}

Reset the options of this Interactable

Parameters:
NameTypeDescription
optionsobject

The new settings to apply

Returns:
Type:
object

This Interactable

unset()

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