9

次のコードを使用して、Web サイトのアイテムを並べ替えます。

$(document).ready(function () {
    $("#my-list").sortable({
        stop: function (event, ui) {
            var id = $(ui.item).attr('id');

            var url = '/en/account/changeposition?id=idreplace&position=posReplace';

            url = url.replace("idreplace", id);
            url = url.replace("posReplace", ui.item.index());

            window.location.href = url;
        },
        distance: 15
    });
});

ただし、要素の位置を変更せずに要素を同じ場所に配置しても、Jquery UI は「stop」関数を呼び出します。

カスタム データ属性を使用せずに要素インデックス (位置) が変更されたかどうかを検出することは可能ですか?

// I would like to avoid adding custom data attributes like this:
<li id="id100" data-original-position="1"></li>
<li id="id101" data-original-position="2"></li>
4

5 に答える 5

30

この回答をご覧ください。

それは次のように私のために働いた：

$(selector).sortable({
    start: function(event, ui) {
        ui.item.data('start_pos', ui.item.index());
    },
    stop: function(event, ui) {
        var start_pos = ui.item.data('start_pos');
        if (start_pos != ui.item.index()) {
            // the item got moved
        } else {
            // the item was returned to the same position
        }
    },
    update: function(event, ui) {
        $.post('/reorder', $(selector).sortable('serialize'))
            .done(function() {
                alert('Updated')
            });
        }
});
于 2013-07-13T22:46:48.697 に答える
11

私が何かを見逃していない限り、updateイベントはここであなたの最良の選択肢になるでしょう. ドキュメントによると

このイベントは、ユーザーが並べ替えを停止し、DOM の位置が変更されたときにトリガーされます。

そのため、ユーザーがドラッグを停止したときにインデックスが変更されたかどうかだけを気にする場合は、updateデータ プロパティを設定して評価する手間を省くことができます。

于 2014-05-14T20:35:11.750 に答える
0

update イベントを使用することがほとんどのシナリオで最良の答えのように見えますが、要素が移動していない場合、このイベントはトリガーされないことに注意してください。

ほとんどの場合、これで問題ないかもしれませんが、ソート可能な停止時にコードを実行する必要があるかもしれませんが、変更は行われませんでした (いくつかのグローバル変数をリセットする必要があることがわかりました)。これは、受け入れられた回答を使用してのみ可能でした。

于 2016-08-18T11:43:26.117 に答える