I am using jQuery Sortable. I have the HTML setup like so:
<ul id='plan'>
<li class='item'>1</li>
<li class='item'>2</li>
<li class='item'>3</li>
<li class='item'>4</li>
</ul>
I want to programmatically move an <li> to a different position. I can achieve this with the following JS:
$("#plan li:eq(1)").insertAfter($("#plan li:eq(2)"));
This works fine except it does not trigger the sortable events like change or update. I have a function which is run on the update event of the sortable but moving the li with JS does not trigger this.
Does anyone know how to trigger the sortable update event?
$("selector").trigger("sortupdate");
you will have to maybe pass in as second argument a function where to put in the event and the ui, event is not as important as ui
the inside code of the sortable widget for event triggering looks like this
this._trigger("update", event, this._uiHash(this));
So you may want to do following
function triggerUpdateFor(selector) {
var widget = $(selector).sortable("widget");
if (widget) widget._trigger("update", null, widget._uiHash(widget));
}
option method from the sortable (to retrieve its callbacks)As each event callback is defined as an option of the sortable widget it can be retrieved as such by calling the option method for the corresponding event callback option (this example uses the update callback):
$('#plan').sortable({
update: function(event, ui) {
// Do something...
}
});
$('#plan').sortable('option', 'update'); // returns function
The update callback expects two parameters, the event and a ui object. The event can be set to null and the ui object needs to be defined with all the properties your update callback expects:
$('#plan').sortable('option','update')(
null,
{
item: $('<li>new item</li>').appendTo($('#plan'))
}
);
This works for all event callbacks that you defined (i.e. receive, change etc.).
The trigger method accepts extra parameters, so if you need the ui parameter, you’ll need to pass that in yourself. But you usually just want the target ui.item, and in this case, you know what that is:
var sortupdate = function (event, ui) {
// do something with ui.item
};
var $plan = $("#plan");
$plan.sortable({
update: sortupdate
});
$plan.on("sortupdate", sortupdate); // sortupdate is not automatically bound
var $item = $("#plan li:eq(1)");
$item.insertAfter($("#plan li:eq(2)"));
$plan.trigger("sortupdate", { item : $item });
Demo: