以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)"));

这样可以正常工作，除非它不会触发可更改或更新等可排序事件。我有一个在sortable的update事件上运行的函数，但用JS移动li不会触发它。

有谁知道如何触发可排序的更新事件？

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

Answer 2

使用sortable中的option方法（检索其回调）

由于每个事件回调被定义为可排序窗口小部件的选项，因此可以通过调用相应的option method来检索它事件回调选项（此示例使用update回调）：

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

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

更新回调expects two parameters，event和ui object。 event可以设置为null，ui object需要使用update callback期望的所有属性进行定义：

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

这适用于您定义的所有事件回调（例如receive，change等。）

Working 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/