Methods
dropzoneMethod(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. |
interact(target) → {Interactable}
interact('#draggable').draggable(true);
var rectables = interact('rect');
rectables
.gesturable(true)
.on('gesturemove', function (event) {
// ...
});
The methods of this variable can be used to set elements as interactables and also to change various default settings.
Calling it as a function and passing an element or a valid CSS selector string returns an Interactable object which has various methods to configure it.
- Source:
Parameters:
Name | Type | Description |
---|---|---|
target |
Element
|
string
|
The HTML or SVG Element to interact with or CSS selector |
Returns:
- Type:
-
Interactable
preventDefault()
- Source:
stopImmediatePropagation()
- Source:
stopPropagation()
- Source: