Moving an item programmatically with jQuery sortable while still triggering events

Question

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?

Answer 1

$("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));
}

Answer 2

Use the 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.).

Working JS-Fiddle

Answer 3

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:

http://jsfiddle.net/D7fCz/3/