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();
}
});
Stop the current action and fire an end event. Inertial movement does not happen.
- 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: