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: $('
new item
').appendTo($('#plan'))
  }
);

This works for all event callbacks that you defined (i.e. receive, change etc.).

Working JS-Fiddle