@interactjs / core/Interactable / Interactable

Class: 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

Partial<Eventable>

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

Name	Type
`this`	`Interactable`
`pointer`	`PointerType`
`event`	`PointerEventType`
`interaction`	`Interaction`<keyof `ActionMap`>
`element`	`Element`

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

Name	Type
`checker`	`Function`

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

Name	Type	Description
`checker?`	`Function`	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

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

Name	Type
`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

Name	Type
`event`	`Event`

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

Name	Type
`newValue`	`DeltaSource`

Returns

Interactable

Defined in

core/Interactable.ts:251

draggable

▸ draggable(options): Interactable

Parameters

Name	Type
`options`	`boolean` \| `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

Name	Type	Description
`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

Name	Type
`dragEvent`	`InteractEvent`<`never`, keyof `PhaseMap`>
`event`	`PointerEventType`
`draggable`	`Interactable`
`draggableElement`	`Element`
`dropElemen`	`Element`
`rect`	`any`

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

Name	Type	Description
`options`	`boolean` \| `DropzoneOptions`	The 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

Name	Type
`E`	extends `Object`

Parameters

Name	Type	Description
`iEvent`	`E`	The 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

Name	Type
`options`	`boolean` \| `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

Name	Type	Description
`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

Name	Type	Description
`element?`	`Element`	The 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

Name	Type
`newValue`	`string` \| `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

Name	Type	Description
`newValue?`	`string` \| `Element`	a 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

Name	Type
`element`	`Document` \| `Node`

Returns

boolean

Defined in

core/Interactable.ts:287

off

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

Removes an InteractEvent, pointerEvent or DOM event listener.

Parameters

Name	Type	Description
`types`	`string`[] \| `EventTypes`	The types of events that were listened for
`listener?`	`ListenersArg`	The event listener function(s)
`options?`	`any`	options 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

Name	Type	Description
`types`	`EventTypes`	The types of events to listen for
`listener?`	`ListenersArg`	The event listener function(s)
`options?`	`any`	options 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

Name	Type
`newValue`	`any`

Returns

any

The current origin or this Interactable

Defined in

core/Interactable.ts:238

pointerEvents

▸ pointerEvents(options): Interactable

Parameters

Name	Type
`options`	`Partial`<`PointerEventOptions`>

Returns

Interactable

Defined in

pointer-events/interactableTargets.ts:10

preventDefault

▸ preventDefault(newValue): Interactable

Parameters

Name	Type
`newValue`	`PreventDefaultValue`

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

Name	Type	Description
`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

Name	Type
`element`	`Element`

Returns

any

The checker function or this Interactable

Defined in

core/Interactable.ts:186

▸ rectChecker(checker): Interactable

Parameters

Name	Type
`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

Name	Type
`T`	extends keyof `ActionMap`

Parameters

Name	Type	Description
`action`	`ActionProps`<`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

Name	Type
`options`	`boolean` \| `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

Name	Type	Description
`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

Name	Type	Description
`options`	`OptionsArg`	The new settings to apply

Returns

Interactable

This Interactable

Defined in

core/Interactable.ts:436

setOnEvents

▸ setOnEvents(actionName, phases): Interactable

Parameters

Name	Type
`actionName`	keyof `ActionMap`
`phases`	`any`

Returns

Interactable

Defined in

core/Interactable.ts:84

setPerAction

▸ setPerAction(actionName, options): void

Parameters

Name	Type
`actionName`	keyof `ActionMap`
`options`	`OrBoolean`<`Options`>

Returns

void

Defined in

core/Interactable.ts:116

styleCursor

▸ styleCursor(newValue): Interactable

Parameters

Name	Type
`newValue`	`boolean`

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

Name	Type
`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

Name	Type
`actionName`	keyof `ActionMap`
`prev`	`Listeners`
`cur`	`Listeners`

Returns

void

Defined in

core/Interactable.ts:101

@interactjs

Table of contents

Modules

Class: Interactable

Implements

Table of contents

Properties

Methods

Properties

devTools

Defined in

getAction

Type declaration

Parameters

Returns

Defined in

target

Defined in

Methods

actionChecker

Parameters

Returns

Defined in

Returns

Defined in

Parameters

Returns

Defined in

allowFrom

Returns

Defined in

Parameters

Returns

Defined in

checkAndPreventDefault

Parameters

Returns

Defined in

context

Returns

Defined in

deltaSource

Returns

Defined in

Parameters

Returns

Defined in

draggable

Parameters

Returns

Defined in

Returns

Defined in

Parameters

Returns

Defined in

dropCheck

Parameters

Returns

Defined in

dropzone

Parameters

Returns

Defined in

Returns

Defined in

fire

Type parameters

Parameters

Returns

Implementation of

Defined in

gesturable

Parameters

Returns

Defined in

Returns

Defined in

Parameters

Returns