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
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
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
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(types, listeneropt, optionsopt) → {Interactable}
Removes an InteractEvent, pointerEvent or DOM event listener.
- Source:
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
types |
string
|
array
|
object
|
The types of events that were listened for |
|
listener |
function
|
array
|
object
|
<optional> |
The event listener function(s) |
options |
object
|
boolean
|
<optional> |
options object or useCapture flag for removeEventListener |
on(types, listeneropt, optionsopt) → {Interactable}
Binds a listener for an InteractEvent, pointerEvent or DOM event.
- Source:
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
types |
string
|
array
|
object
|
The types of events to listen for |
|
listener |
function
|
array
|
object
|
<optional> |
The event listener function(s) |
options |
object
|
boolean
|
<optional> |
options object or useCapture flag for addEventListener |
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
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
reflow(action) → {Promise.<Interactable>}
const interactable = interact(target);
const drag = { name: drag, axis: 'x' };
const resize = { name: resize, edges: { left: true, bottom: true };
interactable.reflow(drag);
interactable.reflow(resize);
Start an action sequence to re-apply modifiers, check drops, etc.
- Source:
Parameters:
Name | Type | Description | ||||||
---|---|---|---|---|---|---|---|---|
action |
Object
|
The action to begin
|
Returns:
- Type:
-
Promise.<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> |