Javascript 使用 jQuery sortable 以编程方式移动项目，同时仍然触发事件

Moving an item programmatically with jQuery sortable while still triggering events

提问by RailsSon

I am using jQuery Sortable. I have the HTML setup like so:

我正在使用 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>

I want to programmatically move an <li>to a different position. I can achieve this with the following JS:

我想以编程方式将 an 移动<li>到不同的位置。我可以使用以下 JS 实现这一点：

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

This works fine except it does not trigger the sortable events like change or update. I have a function which is run on the update event of the sortable but moving the li with JS does not trigger this.

这工作正常，但它不会触发诸如更改或更新之类的可排序事件。我有一个在 sortable 的更新事件上运行的函数，但是用 JS 移动 li 不会触发这个。

Does anyone know how to trigger the sortable update event?

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

采纳答案by Luke

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

you will have to maybe pass in as second argument a function where to put in the event and the ui, event is not as important as ui

您可能必须将函数作为第二个参数传入，将事件和 ui 放入其中，事件不如 ui 重要

the inside code of the sortable widget for event triggering looks like this

用于事件触发的可排序小部件的内部代码如下所示

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

So you may want to do following

所以你可能想要做以下

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

回答by flu

Use the optionmethod from the sortable (to retrieve its callbacks)

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

As each event callbackis defined as an optionof the sortable widget it can be retrieved as such by calling the option methodfor the corresponding event callback option(this example uses the updatecallback):

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

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

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

The update callback expects two parameters, the eventand a ui object. The eventcan be set to null and the ui objectneeds to be defined with all the properties your update callbackexpects:

更新回调需要两个参数， theevent和 a ui object。该event可设置为null，并且ui object与所有属性的定义需求update callback预计：

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

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

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

Working JS-Fiddle

工作 JS-Fiddle

回答by hao

The triggermethod accepts extra parameters, so if you need the uiparameter, you'll need to pass that in yourself. But you usually just want the target ui.item, and in this case, you know what that is:

该trigger方法接受额外的参数，因此如果您需要该ui参数，则需要自己传递该参数。但是你通常只想要 target 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 });

Demo:

演示：

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

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

回答by Craig Bartholomew

Even simpler:

更简单：

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