Śledzenie pozycji wszystkich elementów w jQuery sortable

Question

Próbuję dowiedzieć się, jak mogę śledzić, w jaki sposób elementy w jQuery można sortować. Powiedzmy, że mam cztery elementy (divs) w moim sortable, każdy ma unikalny identyfikator. Nazwijmy je numerami # 100, # 200, # 300 i # 400 i są one przedstawiane w tej kolejności, od czego zacząć. Ale kiedy przesunę # 100, powiedzmy numer 3, muszę mieć możliwość zapisania nowej pozycji dla tego identyfikatora, ale także upewnić się, że inni otrzymują również zaktualizowane wartości pozycji.

Czy mam jakiś sens? Zasadniczo chcę uzyskać pozycje każdego unikalnego identyfikatora, więc mogę zapisać kolejność listy do późniejszego wykorzystania.

I nie były w stanie znaleźć coś, co Raporty dla wszystkich elementów w sortable, tylko dla tego, który został przeniesiony ..

mi punkt w dobrym kierunku? Dzięki

Answer 1

Możesz użyć udostępnionego zdarzenia stopu do sortowania w celu śledzenia pozycji. To jest mały przykład;

(function($) { 
    $('#sortable').sortable({ 
     stop: function(e, ui) { 
      console.log($.map($(this).find('li'), function(el) { 
       return el.id + ' = ' + $(el).index(); 
      })); 
     } 
    }); 
})(jQuery); 

Loguje tablicę wszystkich pozycji w zestawie wraz z ich identyfikatorami i aktualnymi indeksami.

Oto przykład pracuje nad jsfiddle także: http://jsfiddle.net/beyondsanity/HgDZ9/

Answer 2

Prawdopodobny duplikat jQuery UI Sortable Position.

Zasadniczo, aby uzyskać pozycję elementu w obrębie sortable (lub po prostu zwykły starych dominującej elemen), po prostu coś takiego

$('#300').index(); 

Ten kod zwróci 2, jeśli nic nie zostało przeniesione (index() rozpoczyna odliczanie zero) i aktualizuje, gdy elementy są ponownie rozmieszczone. To jest wersja demo: http://jsfiddle.net/XB5Dh/. Możesz kliknąć element, aby zobaczyć jego położenie, a nowa pozycja zostanie wyświetlona po przeciągnięciu elementu.

Answer 3

Zgodnie z docs http://api.jqueryui.com/sortable/#method-toArray Proponuję użyć wbudowanej metody toArray. Przykład:

$(document).ready(function() { 
    $('#sortable').sortable({ 
     stop: function(e, ui) { 
     console.log($('#sortable').sortable('toArray')); 
     } 
    }); 
    $('#sortable').disableSelection(); 
    });