Global

Members

_$interact_23scope

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.

Source:

Methods

dropzoneMethod(optionsopt) → {boolean|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 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:
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

interact(target) → {Interactable}

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.

Source:
Parameters:
Name Type Description
target Element | string

The HTML or SVG Element to interact with or CSS selector

Returns:
Type:
Interactable

stopImmediatePropagation()

Source:

stopPropagation()

Source: