# Interactable

#### new Interactable()

Source:
  - @interactjs/core/Interactable.ts, line 26

### 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:
  - @interactjs/auto-start/InteractableMethods.ts, line 107

#### 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:
  - @interactjs/auto-start/InteractableMethods.ts, line 80

    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:
  - @interactjs/auto-start/InteractableMethods.ts, line 48

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

#### preventDefault

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:
  - @interactjs/core/interactablePreventDefault.ts, line 78

#### 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:
  - @interactjs/auto-start/InteractableMethods.ts, line 140

### Methods

#### context() → {Node}

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

Source:
  - @interactjs/core/Interactable.ts, line 194

##### 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:
  - @interactjs/core/Interactable.ts, line 176

##### 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:
  - @interactjs/actions/drag.ts, line 76

##### 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:
  - @interactjs/actions/drop/index.ts, line 134

#### 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:
  - @interactjs/actions/drop/index.ts, line 90

##### 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:
  - @interactjs/core/Interactable.ts, line 257

##### 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:
  - @interactjs/actions/gesture.ts, line 57

##### 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:
  - @interactjs/core/Interactable.ts, line 105

##### 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:
  - @interactjs/core/Interactable.ts, line 316

##### 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:
  - @interactjs/core/Interactable.ts, line 302

##### 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:
  - @interactjs/core/Interactable.ts, line 162

##### 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:
  - @interactjs/core/Interactable.ts, line 124

##### 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}

    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:
  - @interactjs/reflow/index.ts, line 35

##### Parameters:

Name | Type | Description
--- | --- | ---

`action`

`Object`

The action to begin

Name | Type | Description
--- | --- | ---
`name` | `string` | The name of the action

##### Returns:

Type:
  `Promise`

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

#### 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:
  - @interactjs/actions/resize.ts, line 55

##### 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:
  - @interactjs/core/Interactable.ts, line 330

##### 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:
  - @interactjs/core/Interactable.ts, line 364

##### Returns:

Type:
  `interact`