new Interactable()
- Source:
Members
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:
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:
interact(targett)
.draggable({
ignoreFrom: 'input, textarea, a[href]'',
})
.pointerEvents({
ignoreFrom: '[no-pointer]',
});
Methods
actionChecker(checkeropt) → {function|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;
});
Gets or sets the function used to check action to be performed on pointerDown
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
checker |
function
|
null
|
<optional> |
A function which takes a pointer event,
defaultAction string, interactable, element and interaction as parameters
and returns an object with name property 'drag' 'resize' or 'gesture' and
optionally an |
context() → {Node}
Gets the selector context Node of the Interactable. The default is
window.document
.
- Source:
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:
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:
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
dropzone(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
anddropdeactivate
when an acceptable drag starts and endsdragenter
anddragleave
when a draggable enters and leaves the dropzonedragmove
when a draggable that has entered the dropzone is moveddrop
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. |
fire(iEvent) → {Interactable}
Calls listeners for the given InteractEvent type bound globally and directly to this Interactable
- Source:
Parameters:
Name | Type | Description |
---|---|---|
iEvent |
InteractEvent
|
The InteractEvent object to be fired on 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:
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:
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
element |
Element
|
<optional> |
The element to measure. |
Returns:
- Type:
-
object
The object's bounding rectangle.
off(eventType, listener, optionsopt) → {object}
Removes an InteractEvent, pointerEvent or DOM event listener
- Source:
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
eventType |
string
|
array
|
object
|
The types of events that were listened for |
|
listener |
function
|
The listener function to be removed |
|
options |
object
|
boolean
|
<optional> |
options object or useCapture flag for removeEventListener |
Returns:
- Type:
-
object
This Interactable
on(eventType, listener, optionsopt) → {object}
Binds a listener for an InteractEvent, pointerEvent or DOM event.
- Source:
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
eventType |
string
|
array
|
object
|
The types of events to listen for |
|
listener |
function
|
The function event (s) |
|
options |
object
|
boolean
|
<optional> |
options object or useCapture flag for addEventListener |
Returns:
- Type:
-
object
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:
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
preventDefault(newValueopt) → {string|Interactable}
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:
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
newValue |
string
|
<optional> |
|
rectChecker(checkeropt) → {function|object}
Returns or sets the function used to calculate the interactable's element's rectangle
- Source:
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
checker |
function
|
<optional> |
A function which returns this Interactable's
bounding rectangle. See |
Returns:
- Type:
-
function
|object
The checker function or this Interactable
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:
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:
Parameters:
Name | Type | Description |
---|---|---|
options |
object
|
The new settings to apply |
Returns:
- Type:
-
object
This Interactable
styleCursor(newValueopt) → {boolean|Interactable}
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.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
newValue |
boolean
|
<optional> |