Events
Nestable fires a number of custom events that you can listen for.
You can attach a number of custom event listeners using the on()
method and pass the event name and a callback as the first two arguments:
const instance = new Nestable("#myList");
instance.on('XXXX', fn);
Event listeners can be detached by calling the off()
method with the same arguments:
instance.off('XXXX', fn);
Both the on()
and off()
methods function the same as the native addEventListener
and removeEventListener
methods respectively.
This means that in order to remove a custom event listener from the instance, you must pass the same function expression to the off()
method as you did to the on()
method - declared / anonymous functions cannot be removed.
Incorrect
instance.on('stop', () => {
counter.innerHTML = selected.length;
});
Correct
const updateDisplay = () => {
counter.innerHTML = selected.length;
};
// attach the event listener
instance.on('stop', updateDisplay);
// detach the event listener
instance.off('stop', updateDisplay);
Event reference
Event Name | Description |
---|---|
init |
Fires when the instance is ready to be used. |
start |
Fired on mousedown / touchstart. |
move |
Fired on mousemove / touchmove. |
stop |
Fired on mouseup / touchend. |
nest |
Fired when an item is nested. |
unnest |
Fired when an item is unnested. |
reorder |
Fired when an item is reordered. |
error.maxdepth |
Fires when nesting is attemped when max nesting is already reached. |
error.disabled |
Fires when dropping or nesting is attemped in a disabled item. |
error.collapsed |
Fires when nesting is attemped in a collapsed item. |
error.confined |
Fires when attempting to move a confined item out of it's parent. |
Events Demo
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10
- Item 11
- Item 12
Events
init
update
start
move
stop
nest
unnest
reorder
error.maxdepth
error.disabled
error.collapsed
error.confined