以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

使用optionsortable中的方法(检索其回调)

由于每个事件回调都被定义为可排序窗口小部件的一个选项,因此可以通过调用相应事件回调选项的选项方法来检索它(此示例使用回调):update

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

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

更新回调需要两个参数,eventa和a ui object.该event可设置为null,ui object与所有属性的定义需求update callback预计:

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

本工程为您定义的所有事件回调(如receive,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/