Moving an item programmatically with jQuery sortable while still triggering events

Question

I am using jQuery Sortable. I have the HTML setup like so:

  
1
  
2

        

Answer 1

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 2

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/

Answer 3

$("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 4

Even simpler:

$('#plan').sortable('refresh');