Gets or sets whether drag actions can be performed on the Interactable

Returns: boolean Indicates if this can be the target of drag events

var isDraggable = interact('ul li').draggable();

or

Returns: object This 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
});

Returns or sets whether elements can be dropped onto this Interactable to trigger drop events

Dropzones can receive the following events:

Use the accept option to allow only elements that match the given CSS selector or element. The value can be:

Use the overlap option to set how drops are checked for. The allowed values are:

Use the checker option to specify a function to check if a dragged element is over this Interactable.

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

interact('.drop').dropzone({
  accept: '.can-drop' || document.getElementById('single-drop'),
  overlap: 'pointer' || 'center' || zeroToOne
}

Returns: boolean object The current setting or this Interactable

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

Returns: boolean interact The current setting or interact

Gets or sets whether resize actions can be performed on the Interactable

Returns: boolean Indicates if this can be the target of resize elements

var isResizeable = interact('input[type=text]').resizable();

or

Returns: object This 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,
});

Gets or sets whether multitouch gestures can be performed on the Interactable's element

Returns: boolean Indicates if this can be the target of gesture events

var isGestureable = interact(element).gesturable();

or

Returns: object this 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,
});

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

Returns: object The object's bounding rectangle.

1. {
   1. top : 0,
   2. left : 0,
   3. bottom: 0,
   4. right : 0,
   5. width : 0,
   6. height: 0
2. }

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

Returns: function object The checker function or this Interactable

Gets or sets the origin of the Interactable's element. The x and y of the origin will be subtracted from action event coordinates.

OR

Returns: object The current origin or this Interactable

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

Returns: string object The current deltaSource or this Interactable

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

Returns: Node The context Node of this Interactable

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

Returns: Interactable this Interactable

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

Returns: object This Interactable

Removes an InteractEvent, pointerEvent or DOM event listener

Returns: object This Interactable

Reset the options of this Interactable

Returns: object This Interactable

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

Returns: object interact

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

Returns: Function Interactable The checker function or this 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 whether the the cursor should be changed depending on the action that would be performed if the mouse were pressed and dragged.

Returns: boolean Interactable The current setting or this Interactable

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.

Returns or sets whether to prevent the browser's default behaviour in response to pointer events. Can be set to:

Returns: string Interactable The current setting or this Interactable

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.

Returns: object An Interactable

Usage

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

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

Check if an element has been set

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

Adds a global listener for an InteractEvent or adds a DOM event to document

Returns: object interact

Removes a global InteractEvent listener or DOM event from document

Returns: object interact

Returns an object which exposes internal data

Returns: object An object with properties that outline the current state and expose internal functions and variables

Returns: boolean Whether or not the browser supports touch input

Returns: boolean Whether or not the browser supports PointerEvents

Cancels all interactions (end events are not fired)

Returns: object interact

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

Returns: number Interactable The current setting or interact

Start an action with the given Interactable and Element as tartgets. The action must be enabled for the target Interactable and an appropriate number of pointers must be held down - 1 for drag/resize, 2 for gesture.

Use it with interactable.<action>able({ manualStart: false }) to always start actions manually

Returns: object interact

interact(target)
  .draggable({
    // disable the default drag start by down->move
    manualStart: true
  })
  // start dragging after the user holds the pointer down
  .on('hold', function (event) {
    var interaction = event.interaction;

    if (!interaction.interacting()) {
      interaction.start({ name: 'drag' },
                        event.interactable,
                        event.currentTarget);
    }
});

Force a move of the current action at the same coordinates. Useful if snap/restrict has been changed and you want a movement with the new settings.

interact(target)
  .draggable(true)
  .on('dragmove', function (event) {
    if (someCondition) {
      // change the snap settings
      event.interactable.draggable({ snap: { targets: [] }});
      // fire another move event with re-calculated snap
      event.interaction.doMove();
    }
  });

Stop the current action and fire an end event. Inertial movement does not happen.

interact(target)
  .draggable(true)
  .on('move', function (event) {
    if (event.pageX > 1000) {
      // end the current action
      event.interaction.end();
      // stop all further listeners from being called
      event.stopImmediatePropagation();
    }
  });