@interactjs / core/InteractStatic / InteractStatic

Interface: InteractStatic

interact('#draggable').draggable(true)

var rectables = interact('rect')
rectables
  .gesturable(true)
  .on('gesturemove', function (event) {
      // ...
  })

The methods of this variable can be used to set elements as interactables and also to change various default settings.

Calling it as a function and passing an element or a valid CSS selector string returns an Interactable object which has various methods to configure it.

Param

The HTML or SVG Element to interact with or CSS selector

Callable

InteractStatic

▸ InteractStatic(target, options?): Interactable

Parameters

Name	Type
`target`	`Target`
`options?`	`Options`

Returns

Interactable

Defined in

core/InteractStatic.ts:38

Properties

Methods

Properties

closest

• closest: (element: Node, selector: string) => HTMLElement | SVGElement

Type declaration

▸ (element, selector): HTMLElement | SVGElement

Parameters

Name	Type
`element`	`Node`
`selector`	`string`

Returns

HTMLElement | SVGElement

Defined in

core/InteractStatic.ts:46

createSnapGrid

• createSnapGrid: (grid: GridOptions) => SnapFunction & { coordFields: (readonly ["x", "y"] | readonly ["left", "top"] | readonly ["right", "bottom"] | readonly ["width", "height"])[] ; grid: GridOptions }

Type declaration

▸ (grid): SnapFunction & { coordFields: (readonly ["x", "y"] | readonly ["left", "top"] | readonly ["right", "bottom"] | readonly ["width", "height"])[] ; grid: GridOptions }

Parameters

Name	Type
`grid`	`GridOptions`

Returns

SnapFunction & { coordFields: (readonly ["x", "y"] | readonly ["left", "top"] | readonly ["right", "bottom"] | readonly ["width", "height"])[] ; grid: GridOptions }

Defined in

snappers/plugin.ts:9

dynamicDrop

• dynamicDrop: (newValue?: boolean) => boolean | InteractStatic

Type declaration

▸ (newValue?): boolean | InteractStatic

Returns or sets whether the dimensions of dropzone elements are calculated on every dragmove or only on dragstart for the default dropChecker

Parameters

Name	Type	Description
`newValue?`	`boolean`	True to check on each move. False to check only before start

Returns

boolean | InteractStatic

The current setting or interact

Defined in

actions/drop/plugin.ts:176

getElementClientRect

• getElementClientRect: (element: Element) => Required<Rect>

Type declaration

▸ (element): Required<Rect>

Parameters

Name	Type
`element`	`Element`

Returns

Required<Rect>

Defined in

core/InteractStatic.ts:44

getElementRect

• getElementRect: (element: Element) => Required<Rect>

Type declaration

▸ (element): Required<Rect>

Parameters

Name	Type
`element`	`Element`

Returns

Required<Rect>

Defined in

core/InteractStatic.ts:43

getPointerAverage

• getPointerAverage: (pointers: PointerType[]) => { clientX: number = 0; clientY: number = 0; pageX: number = 0; pageY: number = 0; screenX: number = 0; screenY: number = 0 }

Type declaration

▸ (pointers): Object

Parameters

Name	Type
`pointers`	`PointerType`[]

Returns

Object

Name	Type
`clientX`	`number`
`clientY`	`number`
`pageX`	`number`
`pageY`	`number`
`screenX`	`number`
`screenY`	`number`

Defined in

core/InteractStatic.ts:39

getTouchAngle

• getTouchAngle: (event: TouchEvent | PointerType[], deltaSource: string) => number

Type declaration

▸ (event, deltaSource): number

Parameters

Name	Type
`event`	`TouchEvent` \| `PointerType`[]
`deltaSource`	`string`

Returns

number

Defined in

core/InteractStatic.ts:42

getTouchBBox

• getTouchBBox: (event: PointerType[]) => { bottom: number = maxY; height: number ; left: number = minX; right: number = maxX; top: number = minY; width: number ; x: number = minX; y: number = minY }

Type declaration

▸ (event): Object

Parameters

Name	Type
`event`	`PointerType`[]

Returns

Object

Name	Type
`bottom`	`number`
`height`	`number`
`left`	`number`
`right`	`number`
`top`	`number`
`width`	`number`
`x`	`number`
`y`	`number`

Defined in

core/InteractStatic.ts:40

getTouchDistance

• getTouchDistance: (event: TouchEvent | PointerType[], deltaSource: string) => number

Type declaration

▸ (event, deltaSource): number

Parameters

Name	Type
`event`	`TouchEvent` \| `PointerType`[]
`deltaSource`	`string`

Returns

number

Defined in

core/InteractStatic.ts:41

matchesSelector

• matchesSelector: (element: Element, selector: string) => boolean

Type declaration

▸ (element, selector): boolean

Parameters

Name	Type
`element`	`Element`
`selector`	`string`

Returns

boolean

Defined in

core/InteractStatic.ts:45

maxInteractions

• maxInteractions: (newValue: any) => any

Type declaration

▸ (newValue): any

Returns or sets the maximum number of concurrent interactions allowed. By default only 1 interaction is allowed at a time (for backwards compatibility). To allow multiple interactions on the same Interactables and elements, you need to enable it in the draggable, resizable and gesturable 'max' and 'maxPerElement' options.

Parameters

Name	Type	Description
`newValue`	`any`	Any number. newValue <= 0 means no interactions.

Returns

any

Defined in

auto-start/base.ts:33

modifiers

• modifiers: Object

Type declaration

Name	Type
`aspectRatio`	(`_options?`: `Partial`<`AspectRatioOptions`>) => `Modifier`<`AspectRatioOptions`, `AspectRatioState`, `"aspectRatio"`, `unknown`>
`aspectRatio._defaults`	`AspectRatioOptions`
`aspectRatio._methods`	{ `beforeEnd`: (`arg`: `ModifierArg`<`AspectRatioState`>) => `void` \| `Point` = module.beforeEnd; `set`: (`arg`: `ModifierArg`<`AspectRatioState`>) => `unknown` = module.set; `start`: (`arg`: `ModifierArg`<`AspectRatioState`>) => `void` = module.start; `stop`: (`arg`: `ModifierArg`<`AspectRatioState`>) => `void` = module.stop }
`aspectRatio._methods.beforeEnd`	(`arg`: `ModifierArg`<`AspectRatioState`>) => `void` \| `Point`
`aspectRatio._methods.set`	(`arg`: `ModifierArg`<`AspectRatioState`>) => `unknown`
`aspectRatio._methods.start`	(`arg`: `ModifierArg`<`AspectRatioState`>) => `void`
`aspectRatio._methods.stop`	(`arg`: `ModifierArg`<`AspectRatioState`>) => `void`
`avoid`	`ModifierFunction`<`any`, `any`, `"noop"`>
`restrict`	(`_options?`: `Partial`<`RestrictOptions`>) => `Modifier`<`RestrictOptions`, `RestrictState`, `"restrict"`, `unknown`>
`restrict._defaults`	`RestrictOptions`
`restrict._methods`	{ `beforeEnd`: (`arg`: `ModifierArg`<`RestrictState`>) => `void` \| `Point` = module.beforeEnd; `set`: (`arg`: `ModifierArg`<`RestrictState`>) => `unknown` = module.set; `start`: (`arg`: `ModifierArg`<`RestrictState`>) => `void` = module.start; `stop`: (`arg`: `ModifierArg`<`RestrictState`>) => `void` = module.stop }
`restrict._methods.beforeEnd`	(`arg`: `ModifierArg`<`RestrictState`>) => `void` \| `Point`
`restrict._methods.set`	(`arg`: `ModifierArg`<`RestrictState`>) => `unknown`
`restrict._methods.start`	(`arg`: `ModifierArg`<`RestrictState`>) => `void`
`restrict._methods.stop`	(`arg`: `ModifierArg`<`RestrictState`>) => `void`
`restrictEdges`	(`_options?`: `Partial`<`RestrictEdgesOptions`>) => `Modifier`<`RestrictEdgesOptions`, `RestrictEdgesState`, `"restrictEdges"`, `void`>
`restrictEdges._defaults`	`RestrictEdgesOptions`
`restrictEdges._methods`	{ `beforeEnd`: (`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void` \| `Point` = module.beforeEnd; `set`: (`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void` = module.set; `start`: (`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void` = module.start; `stop`: (`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void` = module.stop }
`restrictEdges._methods.beforeEnd`	(`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void` \| `Point`
`restrictEdges._methods.set`	(`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void`
`restrictEdges._methods.start`	(`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void`
`restrictEdges._methods.stop`	(`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void`
`restrictRect`	(`_options?`: `Partial`<`RestrictOptions` & { `elementRect`: }>) => `Modifier`<`RestrictOptions` & { `elementRect`: }, `RestrictState`, `"restrictRect"`, `unknown`>
`restrictRect._defaults`	`RestrictOptions` & { `elementRect`: }
`restrictRect._methods`	{ `beforeEnd`: (`arg`: `ModifierArg`<`RestrictState`>) => `void` \| `Point` = module.beforeEnd; `set`: (`arg`: `ModifierArg`<`RestrictState`>) => `unknown` = module.set; `start`: (`arg`: `ModifierArg`<`RestrictState`>) => `void` = module.start; `stop`: (`arg`: `ModifierArg`<`RestrictState`>) => `void` = module.stop }
`restrictRect._methods.beforeEnd`	(`arg`: `ModifierArg`<`RestrictState`>) => `void` \| `Point`
`restrictRect._methods.set`	(`arg`: `ModifierArg`<`RestrictState`>) => `unknown`
`restrictRect._methods.start`	(`arg`: `ModifierArg`<`RestrictState`>) => `void`
`restrictRect._methods.stop`	(`arg`: `ModifierArg`<`RestrictState`>) => `void`
`restrictSize`	(`_options?`: `Partial`<`RestrictSizeOptions`>) => `Modifier`<`RestrictSizeOptions`, `RestrictEdgesState`, `"restrictSize"`, `void`>
`restrictSize._defaults`	`RestrictSizeOptions`
`restrictSize._methods`	{ `beforeEnd`: (`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void` \| `Point` = module.beforeEnd; `set`: (`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void` = module.set; `start`: (`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void` = module.start; `stop`: (`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void` = module.stop }
`restrictSize._methods.beforeEnd`	(`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void` \| `Point`
`restrictSize._methods.set`	(`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void`
`restrictSize._methods.start`	(`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void`
`restrictSize._methods.stop`	(`arg`: `ModifierArg`<`RestrictEdgesState`>) => `void`
`rubberband`	`ModifierFunction`<`any`, `any`, `"noop"`>
`snap`	(`_options?`: `Partial`<`SnapOptions`>) => `Modifier`<`SnapOptions`, `SnapState`, `"snap"`, { `delta`: { `x`: `number` = 0; `y`: `number` = 0 } ; `distance`: `number` = 0; `inRange`: `boolean` = false; `range`: `number` = 0; `target`: `any` = null }>
`snap._defaults`	`SnapOptions`
`snap._methods`	{ `beforeEnd`: (`arg`: `ModifierArg`<`SnapState`>) => `void` \| `Point` = module.beforeEnd; `set`: (`arg`: `ModifierArg`<`SnapState`>) => { `delta`: { `x`: `number` = 0; `y`: `number` = 0 } ; `distance`: `number` = 0; `inRange`: `boolean` = false; `range`: `number` = 0; `target`: `any` = null } = module.set; `start`: (`arg`: `ModifierArg`<`SnapState`>) => `void` = module.start; `stop`: (`arg`: `ModifierArg`<`SnapState`>) => `void` = module.stop }
`snap._methods.beforeEnd`	(`arg`: `ModifierArg`<`SnapState`>) => `void` \| `Point`
`snap._methods.set`	(`arg`: `ModifierArg`<`SnapState`>) => { `delta`: { `x`: `number` = 0; `y`: `number` = 0 } ; `distance`: `number` = 0; `inRange`: `boolean` = false; `range`: `number` = 0; `target`: `any` = null }
`snap._methods.start`	(`arg`: `ModifierArg`<`SnapState`>) => `void`
`snap._methods.stop`	(`arg`: `ModifierArg`<`SnapState`>) => `void`
`snapEdges`	(`_options?`: `Partial`<`SnapEdgesOptions`>) => `Modifier`<`SnapEdgesOptions`, `SnapState`, `"snapEdges"`, { `delta`: { `x`: `number` = 0; `y`: `number` = 0 } ; `distance`: `number` = 0; `inRange`: `boolean` = false; `range`: `number` = 0; `target`: `any` = null }>
`snapEdges._defaults`	`SnapEdgesOptions`
`snapEdges._methods`	{ `beforeEnd`: (`arg`: `ModifierArg`<`SnapState`>) => `void` \| `Point` = module.beforeEnd; `set`: (`arg`: `ModifierArg`<`SnapState`>) => { `delta`: { `x`: `number` = 0; `y`: `number` = 0 } ; `distance`: `number` = 0; `inRange`: `boolean` = false; `range`: `number` = 0; `target`: `any` = null } = module.set; `start`: (`arg`: `ModifierArg`<`SnapState`>) => `void` = module.start; `stop`: (`arg`: `ModifierArg`<`SnapState`>) => `void` = module.stop }
`snapEdges._methods.beforeEnd`	(`arg`: `ModifierArg`<`SnapState`>) => `void` \| `Point`
`snapEdges._methods.set`	(`arg`: `ModifierArg`<`SnapState`>) => { `delta`: { `x`: `number` = 0; `y`: `number` = 0 } ; `distance`: `number` = 0; `inRange`: `boolean` = false; `range`: `number` = 0; `target`: `any` = null }
`snapEdges._methods.start`	(`arg`: `ModifierArg`<`SnapState`>) => `void`
`snapEdges._methods.stop`	(`arg`: `ModifierArg`<`SnapState`>) => `void`
`snapSize`	(`_options?`: `Partial`<`SnapSizeOptions`>) => `Modifier`<`SnapSizeOptions`, `SnapState`, `"snapSize"`, { `delta`: { `x`: `number` = 0; `y`: `number` = 0 } ; `distance`: `number` = 0; `inRange`: `boolean` = false; `range`: `number` = 0; `target`: `any` = null }>
`snapSize._defaults`	`SnapSizeOptions`
`snapSize._methods`	{ `beforeEnd`: (`arg`: `ModifierArg`<`SnapState`>) => `void` \| `Point` = module.beforeEnd; `set`: (`arg`: `ModifierArg`<`SnapState`>) => { `delta`: { `x`: `number` = 0; `y`: `number` = 0 } ; `distance`: `number` = 0; `inRange`: `boolean` = false; `range`: `number` = 0; `target`: `any` = null } = module.set; `start`: (`arg`: `ModifierArg`<`SnapState`>) => `void` = module.start; `stop`: (`arg`: `ModifierArg`<`SnapState`>) => `void` = module.stop }
`snapSize._methods.beforeEnd`	(`arg`: `ModifierArg`<`SnapState`>) => `void` \| `Point`
`snapSize._methods.set`	(`arg`: `ModifierArg`<`SnapState`>) => { `delta`: { `x`: `number` = 0; `y`: `number` = 0 } ; `distance`: `number` = 0; `inRange`: `boolean` = false; `range`: `number` = 0; `target`: `any` = null }
`snapSize._methods.start`	(`arg`: `ModifierArg`<`SnapState`>) => `void`
`snapSize._methods.stop`	(`arg`: `ModifierArg`<`SnapState`>) => `void`
`spring`	`ModifierFunction`<`any`, `any`, `"noop"`>
`transform`	`ModifierFunction`<`any`, `any`, `"noop"`>

Defined in

modifiers/plugin.ts:14

snappers

• snappers: __module

Defined in

snappers/plugin.ts:8

version

• version: string

Defined in

core/InteractStatic.ts:48

Methods

addDocument

▸ addDocument(doc, options?): void

Parameters

Name	Type
`doc`	`Document`
`options?`	`object`

Returns

void

Defined in

core/InteractStatic.ts:94

debug

▸ debug(): any

Returns

any

Defined in

core/InteractStatic.ts:73

isSet

▸ isSet(target, options?): boolean

Check if an element or selector has been set with the interact(target) function

Parameters

Name	Type
`target`	`Target`
`options?`	`any`

Returns

boolean

Indicates if the element or CSS selector was previously passed to interact

Defined in

core/InteractStatic.ts:66

off

▸ off(type, listener, options?): any

Parameters

Name	Type
`type`	`EventTypes`
`listener`	`any`
`options?`	`object`

Returns

any

Defined in

core/InteractStatic.ts:72

on

▸ on(type, listener, options?): any

Parameters

Name	Type
`type`	`EventTypes`
`listener`	`ListenersArg`
`options?`	`object`

Returns

any

Defined in

core/InteractStatic.ts:71

pointerMoveTolerance

▸ pointerMoveTolerance(newValue?): number | InteractStatic

Returns or sets the distance the pointer must be moved before an action sequence occurs. This also affects tolerance for tap events.

Parameters

Name	Type	Description
`newValue?`	`number`	The movement from the start position must be greater than this value

Returns

number | InteractStatic

Defined in

core/InteractStatic.ts:90

removeDocument

▸ removeDocument(doc): void

Parameters

Name	Type
`doc`	`Document`

Returns

void

Defined in

core/InteractStatic.ts:95

stop

▸ stop(): InteractStatic

Cancels all interactions (end events are not fired)

Returns

InteractStatic

Defined in

core/InteractStatic.ts:85

supportsPointerEvent

▸ supportsPointerEvent(): boolean

Whether or not the browser supports PointerEvents

Returns

boolean

Defined in

core/InteractStatic.ts:81

supportsTouch

▸ supportsTouch(): boolean

Whether or not the browser supports touch input

Returns

boolean

Defined in

core/InteractStatic.ts:77

use

▸ use(plugin, options?): any

Use a plugin

Parameters

Name	Type
`plugin`	`Plugin`
`options?`	`Object`

Returns

any

Defined in

core/InteractStatic.ts:53

@interactjs

Table of contents

Modules

Interface: InteractStatic

Callable

InteractStatic

Parameters

Returns

Defined in

Table of contents

Properties

Methods

Properties

closest

Type declaration

Parameters

Returns

Defined in

createSnapGrid

Type declaration

Parameters

Returns

Defined in

dynamicDrop

Type declaration

Parameters

Returns

Defined in

getElementClientRect

Type declaration

Parameters

Returns

Defined in

getElementRect

Type declaration

Parameters

Returns

Defined in

getPointerAverage

Type declaration

Parameters

Returns

Defined in

getTouchAngle

Type declaration

Parameters

Returns

Defined in

getTouchBBox

Type declaration

Parameters

Returns

Defined in

getTouchDistance

Type declaration

Parameters

Returns

Defined in

matchesSelector

Type declaration

Parameters

Returns

Defined in

maxInteractions

Type declaration

Parameters

Returns

Defined in

modifiers

Type declaration

Defined in

snappers

Defined in

version

Defined in

Methods

addDocument

Parameters

Returns

Defined in