Interactable

Interactable

new Interactable()

Source:

Members

allowFrom

Deprecated:
  • 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. Don't use this method. Instead set the `allowFrom` option for each action or for `pointerEvents`
Source:
interact(targett)
  .resizable({
    allowFrom: '.resize-handle',
  .pointerEvents({
    allowFrom: '.handle',,
  });

ignoreFrom

interact(element, { ignoreFrom: document.getElementById('no-action') });
// or
interact(element).ignoreFrom('input, textarea, a');
Deprecated:
  • 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. Don't use this method. Instead set the `ignoreFrom` option for each action or for `pointerEvents`
Source:
interact(targett)
  .draggable({
    ignoreFrom: 'input, textarea, a[href]'',
  })
  .pointerEvents({
    ignoreFrom: '[no-pointer]',
  });

Methods

actionChecker(checkeropt) → {function|Interactable}

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

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

Source:
Parameters:
Name Type Attributes Description
checker function | null <optional>

A function which takes a pointer event, defaultAction string, interactable, element and interaction as parameters and returns an object with name property 'drag' 'resize' or 'gesture' and optionally an edges object with boolean 'top', 'left', 'bottom' and right props.

Returns:
Type:
function | Interactable

The checker function or this Interactable

context() → {Node}

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

Source:
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.

Source:
Parameters:
Name Type Attributes Description
newValue string <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

Source:
Parameters:
Name Type Attributes Description
options boolean | 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

dropzone(optionsopt) → {boolean|Interactable}

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.

Source:
Parameters:
Name Type Attributes Description
options boolean | object | null <optional>

The new options to be set.

Returns:
Type:
boolean | Interactable

The current setting or this Interactable

fire(iEvent) → {Interactable}

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

Source:
Parameters:
Name Type Description
iEvent InteractEvent

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

Source:
Parameters:
Name Type Attributes Description
options boolean | 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) → {object}

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

Source:
Parameters:
Name Type Attributes Description
element Element <optional>

The element to measure.

Returns:
Type:
object

The object's bounding rectangle.

off(eventType, listener, optionsopt) → {object}

Removes an InteractEvent, pointerEvent or DOM event listener

Source:
Parameters:
Name Type Attributes Description
eventType string | array | object

The types of events that were listened for

listener function

The listener function to be removed

options object | boolean <optional>

options object or useCapture flag for removeEventListener

Returns:
Type:
object

This Interactable

on(eventType, listener, optionsopt) → {object}

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

Source:
Parameters:
Name Type Attributes Description
eventType string | array | object

The types of events to listen for

listener function

The function event (s)

options object | boolean <optional>

options object or useCapture flag for addEventListener

Returns:
Type:
object

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.

Source:
Parameters:
Name Type Attributes Description
origin Element | 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

preventDefault(newValueopt) → {string|Interactable}

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
Source:
Parameters:
Name Type Attributes Description
newValue string <optional>

true, false or 'auto'

Returns:
Type:
string | Interactable

The current setting or this Interactable

rectChecker(checkeropt) → {function|object}

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

Source:
Parameters:
Name Type Attributes Description
checker function <optional>

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

Returns:
Type:
function | object

The checker function or this Interactable

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

Source:
Parameters:
Name Type Attributes Description
options boolean | 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

Source:
Parameters:
Name Type Description
options object

The new settings to apply

Returns:
Type:
object

This Interactable

styleCursor(newValueopt) → {boolean|Interactable}

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.

Source:
Parameters:
Name Type Attributes Description
newValue boolean <optional>
Returns:
Type:
boolean | Interactable

The current setting or this Interactable

unset() → {interact}

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

Source:
Returns:
Type:
interact