Interactable

Interactable

new Interactable()

Source:

Classes

Interactable

Members

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

Source:

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

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.

Source:

Methods

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

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

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

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(types, listeneropt, optionsopt) → {Interactable}

Removes an InteractEvent, pointerEvent or DOM event listener.

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

The types of events that were listened for

listener function | array | object <optional>

The event listener function(s)

options object | 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.

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

The types of events to listen for

listener function | array | object <optional>

The event listener function(s)

options object | 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.

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

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

reflow(action) → {Promise.<Interactable>}

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.

Source:
Parameters:
Name Type Description
action Object

The action to begin

Name Type Description
name string

The name of the action

Returns:
Type:
Promise.<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

unset() → {interact}

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

Source:
Returns:
Type:
interact