使用可排序的 jQuery 以编程方式移动项目，同时仍触发事件

Posted 2023-02-24

【中文标题】使用可排序的 jQuery 以编程方式移动项目，同时仍触发事件

【英文标题】：Moving an item programmatically with jQuery sortable while still triggering events

【发布时间】：2011-06-22 02:52:20

【问题描述】：

我正在使用 jQuery 可排序。我有这样的 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)"));

这很好用，只是它不会触发可排序的事件，如更改或更新。我有一个在可排序的更新事件上运行的函数，但是用 JS 移动 li 不会触发这个。

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

【参考方案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));

【讨论】：

看来我是唯一一个对这个解决方案不起作用的人。当我尝试以这种方式调用更新时，我收到一条错误消息，提示“对象没有方法 _uiHash()”。帮助，有人吗？我尝试了各种方法来获取 _uiHash 但没有运气。我实际上需要它，因为我在更新事件处理程序中使用了 ui 参数。

我不得不稍微改变一下： - 我不得不调用 $(selector).sortable("widget") 而不是调用 $(selector).data("ui-sortable")，所以_uiHash 被暴露了。 - 我还必须将 widget.currentItem 设置为行元素，以便使用“ui.item”调用我的更新回调。

这对我也不起作用，@EddieLoeffen 的建议也没有。最后改用这个答案：***.com/a/24484040/295246

【参考方案2】：

更简单：

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

【参考方案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】：

使用 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，并且需要使用 update callback 期望的所有属性来定义 ui object：

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

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

Working JS-Fiddle