Перемещение элемента программно с помощью сортируемой jQuery, при этом вызывая события

Question

Я использую jQuery Sortable. У меня есть настройки HTML так:

<ul id='plan'>
  <li class='item'>1</li>
  <li class='item'>2</li>
  <li class='item'>3</li>
  <li class='item'>4</li>
</ul>

Я хочу программно переместить <li> в другую позицию. Я могу добиться этого с помощью следующего JS:

$("#plan li:eq(1)").insertAfter($("#plan li:eq(2)"));

Это прекрасно работает, за исключением того, что оно не вызывает сортируемые события, такие как изменение или обновление. У меня есть функция, которая запускается на событии обновления сортируемой, но перемещение li с помощью JS не вызывает этого.

Кто-нибудь знает, как вызвать событие сортируемого обновления?

Answer 1

$("selector").trigger("sortupdate");

вам, возможно, придется передать в качестве второго аргумента функцию, в которую нужно поместить событие и пользовательский интерфейс, событие не так важно, как пользовательский интерфейс

внутренний код сортируемого виджета для событиязапуск выглядит следующим образом

this._trigger("update", event, this._uiHash(this));

Так что вы можете сделать следующее

function triggerUpdateFor(selector) {
    var widget = $(selector).sortable("widget");
    if (widget) widget._trigger("update", null, widget._uiHash(widget));
}

Answer 2

Используйте метод option из сортируемого (чтобы получить его обратные вызовы)

Поскольку каждый обратный вызов события определяется как опция сортируемого виджета itможно получить как таковой, вызвав метод опции для соответствующей опции обратного вызова события (в этом примере используется обратный вызов update):

$('#plan').sortable({
  update: function(event, ui) {
    // Do something...
  }
});

$('#plan').sortable('option', 'update'); // returns function

Обновлениеобратный вызов ожидает два параметра , event и ui object.Для event может быть установлено значение null, а ui object должен быть определен со всеми свойствами, ожидаемыми вашим update callback:

$('#plan').sortable('option','update')(
  null,
  {
    item: $('<li>new item</li>').appendTo($('#plan'))
  }
);

Это работает для всех определенных вами обратных вызовов событий (т. Е. * 1026).*, change и т. Д.).

Рабочая JS-Fiddle

Answer 3

Метод trigger принимает дополнительные параметры, поэтому, если вам нужен параметр ui, вам нужно передать его в себя.Но обычно вы просто хотите получить цель ui.item, и в этом случае вы знаете, что это такое:

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 });

Демо:

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

Answer 4

Еще проще:

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