new Interactable()
- Source:
Classes
Members
actionChecker
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
})
Returns or sets the function used to check action to be performed on pointerDown
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]',
})
styleCursor
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.
Methods
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
dropCheck()
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')
}
- Source:
dropzone(optionsopt) → {boolean|Interactable}
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(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