jquery - スイッチ位置の動作を変更する

Question

ソート可能なスイッチの動作を変更するには? つまり、デフォルトで1 - 2 - 3 - 4 http://jsfiddle.net/keGuN/ の位置を切り替える4と、1それらは に変換され4 - 1 - 2 - 3ます。4と1( )の位置を入れ替えるだけです4 - 2 - 3 - 1。どうやってするの？

Answer 1

私はあなたが何をしようとしているのか理解していると思います。jQuery の Sortable は、あなたが求めていることを実際に行うようには設計されていません。ただし、Sortable が公開するイベントを操作すると、ドラッグされたアイテム (A) の位置を、以前に A がドロップされた場所 (B) にあったアイテムと入れ替えることができます。これにより、必要な効果が得られると思います：

jsFiddle デモ

jQuery:

$(function() {
    var oldIndex;

    $("#sortable").sortable({
        start: function(event, ui) {
            oldIndex = ui.item.index();
        },
        stop: function(event, ui) {
            var newIndex = ui.item.index();
            var movingForward = newIndex > oldIndex;            
            var nextIndex = newIndex + (movingForward ? -1 : 1);

            var items = $('#sortable > div');

            // Find the element to move
            var itemToMove = items.get(nextIndex);
            if (itemToMove) {

                // Find the element at the index where we want to move the itemToMove
                var newLocation = $(items.get(oldIndex));

                // Decide if it goes before or after
                if (movingForward) {
                    $(itemToMove).insertBefore(newLocation);
                } else {
                    $(itemToMove).insertAfter(newLocation);
                }
            }
        }
    });

    $("#sortable").disableSelection();
});

唯一の顕著な問題は、ドラッグ時に位置が更新されず、アイテムが新しい場所にドロップされた後にのみ更新されることです。