CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Oktav
Oktav

Reputation: 2151

jQuery UI Sortable: order of events

Does anyone know in which order the jQuery sortable events are being triggered? I'm asking this because I had a problem with stop and update. It made more sense to me that update event would come after stop event but that was not the case.

Is this documented anywhere or did someone investigate this? I couldn't manage to find a proper list and I don't feel like looking through the code just yet.

Upvotes: 4

Views: 5202

Answers (3)

omarjebari
omarjebari

Reputation: 5499

The order of events is:

create - Triggered when the sortable is created

start - Triggered when sorting starts

activate - Triggered for every connected list on drag start

over - Triggered when a sortable item is moved into a sortable list

sort - Triggered during sorting

change - Triggered during sorting, but only when DOM position has changed

beforeStop - Triggered before sorting stops, placeholder/helper

update - Triggered when stopped sorting and DOM position has changed

deactivate - Triggered before sorting stopped, propagated to all possible connected lists

out - Triggered when a sortable item is moved away from a sortable list

stop - Triggered when sorting has stopped

There are other events which can occur too:

receive/remove - Triggered when items are moved between lists

No idea why this isn't clearer on the jQueryUI site.

Note that, depending upon the event triggered, the ui arguments differs. It's worth looking at the API documentation to be clear what this is and to debug it.

http://api.jqueryui.com/sortable/

Upvotes: 8

candeias
candeias

Reputation: 131

The stop event is the last to be fired. Check here to see all the events of a Jquery sortable element.

Upvotes: 1

Frédéric Hamidi
Frédéric Hamidi

Reputation: 262919

From the current source code, update events are put into a queue:

delayedTriggers.push(function(event) {
    this._trigger("update", event, this._uiHash());
}); //Trigger update callback if the DOM position has changed

The queued events are then triggered between beforestop and stop:

this._trigger("beforeStop", event, this._uiHash());
for (i=0; i < delayedTriggers.length; i++) {
        delayedTriggers[i].call(this, event);
} //Trigger all delayed events
this._trigger("stop", event, this._uiHash());

Therefore, in the current implementation, update events will always be triggered before stop events.

Upvotes: 0

Related Questions