Interaction

Interaction

new Interaction()

Source:

Methods

doMove()

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

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.

Source:

end(eventopt)

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();
    }
  });
Source:
Parameters:
Name Type Attributes Description
event PointerEvent <optional>

start(action, target, element) → {object}

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

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

Source:
Parameters:
Name Type Description
action object

The action to be performed - drag, resize, etc.

target Interactable

The Interactable to target

element Element

The DOM Element to target

Returns:
Type:
object

interact

stop()

Source: