, ,, , ,, , , , image/svg+xml , image/svg+xml , interact.js , image/svg+xml , ,, , ,

@interactjs / core/Interactable / Interactable

Class: Interactable

core/Interactable.Interactable

const interactable = interact('.cards')
  .draggable({
    listeners: { move: event => console.log(event.type, event.pageX, event.pageY) }
  })
  .resizable({
    listeners: { move: event => console.log(event.rect) },
    modifiers: [interact.modifiers.restrictEdges({ outer: 'parent' })]
  })

Implements

Table of contents

Properties

Methods

Properties

devTools

devTools: OptionMethod<DevToolsOptions>

Defined in

dev-tools/plugin.ts:26


getAction

getAction: (this: Interactable, pointer: PointerType, event: PointerEventType, interaction: Interaction<keyof ActionMap>, element: Element) => ActionProps<never>

Type declaration

▸ (this, pointer, event, interaction, element): ActionProps<never>

Parameters
NameType
thisInteractable
pointerPointerType
eventPointerEventType
interactionInteraction<keyof ActionMap>
elementElement
Returns

ActionProps<never>

Defined in

auto-start/InteractableMethods.ts:10


target

Readonly target: Target

Defined in

core/Interactable.ts:59

Methods

actionChecker

actionChecker(checker): Interactable

Parameters

NameType
checkerFunction

Returns

Interactable

Defined in

auto-start/InteractableMethods.ts:27

actionChecker(): Function

Returns

Function

Defined in

auto-start/InteractableMethods.ts:28

actionChecker(checker?): 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
})

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

Parameters

NameTypeDescription
checker?FunctionA 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

Function | Interactable

The checker function or this Interactable

Defined in

auto-start/InteractableMethods.ts:60


allowFrom

allowFrom(): boolean

Returns

boolean

Defined in

auto-start/InteractableMethods.ts:89

allowFrom(newValue?): Interactable

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.

Parameters

NameType
newValue?string | Element

Returns

Interactable

The current allowFrom value or this Interactable

Deprecated

Don’t use this method. Instead set the allowFrom option for each action or for pointerEvents

interact(targett)
  .resizable({
    allowFrom: '.resize-handle',
  .pointerEvents({
    allowFrom: '.handle',,
  })

Defined in

auto-start/InteractableMethods.ts:113


checkAndPreventDefault

checkAndPreventDefault(event): void

Parameters

NameType
eventEvent

Returns

void

Defined in

core/interactablePreventDefault.ts:27


context

context(): Context

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

Returns

Context

The context Node of this Interactable

Defined in

core/Interactable.ts:283


deltaSource

deltaSource(): DeltaSource

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

Returns

DeltaSource

The current deltaSource or this Interactable

Defined in

core/Interactable.ts:250

deltaSource(newValue): Interactable

Parameters

NameType
newValueDeltaSource

Returns

Interactable

Defined in

core/Interactable.ts:251


draggable

draggable(options): Interactable

Parameters

NameType
optionsboolean | Partial<OrBoolean<DraggableOptions>>

Returns

Interactable

Defined in

actions/drag/plugin.ts:10

draggable(): DraggableOptions

Returns

DraggableOptions

Defined in

actions/drag/plugin.ts:11

draggable(options?): Interactable | DraggableOptions

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

NameTypeDescription
options?boolean | Partial<OrBoolean<DraggableOptions>>true/false or An object with event listeners to be fired on drag events (object makes the Interactable draggable)

Returns

Interactable | DraggableOptions

Defined in

actions/drag/plugin.ts:47


dropCheck

dropCheck(dragEvent, event, draggable, draggableElement, dropElemen, rect): boolean

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

Parameters

NameType
dragEventInteractEvent<never, keyof PhaseMap>
eventPointerEventType
draggableInteractable
draggableElementElement
dropElemenElement
rectany

Returns

boolean

Defined in

actions/drop/plugin.ts:115


dropzone

dropzone(options): 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

NameTypeDescription
optionsboolean | DropzoneOptionsThe new options to be set

Returns

Interactable

Defined in

actions/drop/plugin.ts:96

dropzone(): DropzoneOptions

Returns

DropzoneOptions

The current setting

Defined in

actions/drop/plugin.ts:98


fire

fire<E>(iEvent): Interactable

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

Type parameters

NameType
Eextends Object

Parameters

NameTypeDescription
iEventEThe InteractEvent object to be fired on this Interactable

Returns

Interactable

this Interactable

Implementation of

Partial.fire

Defined in

core/Interactable.ts:346


gesturable

gesturable(options): Interactable

Parameters

NameType
optionsboolean | Partial<OrBoolean<GesturableOptions>>

Returns

Interactable

Defined in

actions/gesture/plugin.ts:24

gesturable(): GesturableOptions

Returns

GesturableOptions

Defined in

actions/gesture/plugin.ts:25

gesturable(options?): Interactable | GesturableOptions

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

    // limit multiple gestures.
    // See the explanation in {@link 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

NameTypeDescription
options?boolean | Partial<OrBoolean<GesturableOptions>>true/false or An object with event listeners to be fired on gesture events (makes the Interactable gesturable)

Returns

Interactable | GesturableOptions

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

Defined in

actions/gesture/plugin.ts:47


getRect

getRect(element?): Required<Rect>

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

Parameters

NameTypeDescription
element?ElementThe element to measure.

Returns

Required<Rect>

The object’s bounding rectangle.

Implementation of

Partial.getRect

Defined in

core/Interactable.ts:168


ignoreFrom

ignoreFrom(newValue): Interactable

Parameters

NameType
newValuestring | Element

Returns

Interactable

This interactable

Defined in

auto-start/InteractableMethods.ts:62

ignoreFrom(): string | Element

Returns

string | Element

The current ignoreFrom value

Defined in

auto-start/InteractableMethods.ts:64

ignoreFrom(newValue?): string | Element | Interactable

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.

Parameters

NameTypeDescription
newValue?string | Elementa CSS selector string, an Element or null to not ignore any elements

Returns

string | Element | Interactable

Deprecated

Don’t use this method. Instead set the ignoreFrom option for each action or for pointerEvents

interact(targett)
  .draggable({
    ignoreFrom: 'input, textarea, a[href]'',
  })
  .pointerEvents({
    ignoreFrom: '[no-pointer]',
  })

Interactable

Defined in

auto-start/InteractableMethods.ts:85


inContext

inContext(element): boolean

Parameters

NameType
elementDocument | Node

Returns

boolean

Defined in

core/Interactable.ts:287


off

off(types, listener?, options?): Interactable

Removes an InteractEvent, pointerEvent or DOM event listener.

Parameters

NameTypeDescription
typesstring[] | EventTypesThe types of events that were listened for
listener?ListenersArgThe event listener function(s)
options?anyoptions object or useCapture flag for removeEventListener

Returns

Interactable

This Interactable

Implementation of

Partial.off

Defined in

core/Interactable.ts:426


on

on(types, listener?, options?): Interactable

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

Parameters

NameTypeDescription
typesEventTypesThe types of events to listen for
listener?ListenersArgThe event listener function(s)
options?anyoptions object or useCapture flag for addEventListener

Returns

Interactable

This Interactable

Implementation of

Partial.on

Defined in

core/Interactable.ts:412


origin

origin(newValue): any

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

NameType
newValueany

Returns

any

The current origin or this Interactable

Defined in

core/Interactable.ts:238


pointerEvents

pointerEvents(options): Interactable

Parameters

NameType
optionsPartial<PointerEventOptions>

Returns

Interactable

Defined in

pointer-events/interactableTargets.ts:10


preventDefault

preventDefault(newValue): Interactable

Parameters

NameType
newValuePreventDefaultValue

Returns

Interactable

Defined in

core/interactablePreventDefault.ts:14

preventDefault(): PreventDefaultValue

Returns

PreventDefaultValue

Defined in

core/interactablePreventDefault.ts:15

preventDefault(newValue?): Interactable | PreventDefaultValue

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

Parameters

NameTypeDescription
newValue?PreventDefaultValue'always', 'never' or 'auto'

Returns

Interactable | PreventDefaultValue

The current setting or this Interactable

Defined in

core/interactablePreventDefault.ts:26


rectChecker

rectChecker(): (element: Element) => any

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

Returns

fn

The checker function or this Interactable

▸ (element): any

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

Parameters
NameType
elementElement
Returns

any

The checker function or this Interactable

Defined in

core/Interactable.ts:186

rectChecker(checker): Interactable

Parameters

NameType
checker(element: Element) => any

Returns

Interactable

Defined in

core/Interactable.ts:187


reflow

reflow<T>(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.

Type parameters

NameType
Textends keyof ActionMap

Parameters

NameTypeDescription
actionActionProps<T>The action to begin

Returns

Promise<Interactable>

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

Defined in

reflow/plugin.ts:36


resizable

resizable(): ResizableOptions

Returns

ResizableOptions

Defined in

actions/resize/plugin.ts:24

resizable(options): Interactable

Parameters

NameType
optionsboolean | Partial<OrBoolean<ResizableOptions>>

Returns

Interactable

Defined in

actions/resize/plugin.ts:25

resizable(options?): Interactable | ResizableOptions

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 {@link 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

NameTypeDescription
options?boolean | Partial<OrBoolean<ResizableOptions>>true/false or An object with event listeners to be fired on resize events (object makes the Interactable resizable)

Returns

Interactable | ResizableOptions

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

Defined in

actions/resize/plugin.ts:71


set

set(options): Interactable

Reset the options of this Interactable

Parameters

NameTypeDescription
optionsOptionsArgThe new settings to apply

Returns

Interactable

This Interactable

Defined in

core/Interactable.ts:436


setOnEvents

setOnEvents(actionName, phases): Interactable

Parameters

NameType
actionNamekeyof ActionMap
phasesany

Returns

Interactable

Defined in

core/Interactable.ts:84


setPerAction

setPerAction(actionName, options): void

Parameters

NameType
actionNamekeyof ActionMap
optionsOrBoolean<Options>

Returns

void

Defined in

core/Interactable.ts:116


styleCursor

styleCursor(newValue): Interactable

Parameters

NameType
newValueboolean

Returns

Interactable

Defined in

auto-start/InteractableMethods.ts:17

styleCursor(): boolean

Returns

boolean

Defined in

auto-start/InteractableMethods.ts:18

styleCursor(newValue?): 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.

Parameters

NameType
newValue?boolean

Returns

boolean | Interactable

The current setting or this Interactable

Defined in

auto-start/InteractableMethods.ts:26


unset

unset(): void

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

Returns

void

Defined in

core/Interactable.ts:472


updatePerActionListeners

updatePerActionListeners(actionName, prev, cur): void

Parameters

NameType
actionNamekeyof ActionMap
prevListeners
curListeners

Returns

void

Defined in

core/Interactable.ts:101