web-dev-qa-db-ja.com

イベントをトリガーしながら、jQuery sortableを使用してプログラムでアイテムを移動する

私は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を移動してもこれはトリガーされません。

誰かがソート可能な更新イベントをトリガーする方法を知っていますか？

javascriptjqueryjquery-uijquery-ui-sortable
45
RailsSon
$("selector").trigger("sortupdate");

イベントとuiを配置する関数を2番目の引数として渡す必要があります。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));
}
16
Luke

Sortableからoptionメソッドを使用します（そのコールバックを取得するため）

各イベントコールバックは、ソート可能なウィジェットのオプションとして定義されているため、 オプションメソッド を呼び出して、対応するイベントコールバックオプションを呼び出すことで、このように取得できます（この例では、update 折り返し電話）：

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

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

更新コールバック 2つのパラメーターが必要 、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

9
flu

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/

7
hao

さらにシンプル：

$('#plan').sortable('refresh');
2
Craig Bartholomew