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

Я использую 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 не вызывает этого.

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

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

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

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

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

Это работает для всех обратных вызовов событий, которые вы определили (т.е. receive, change и т.д.).

Рабочая JS-скрипта

Ответ 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/

Ответ 4

Еще проще:

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