Wie erhält man jQuery sortierbare Listenreihenfolge?

Question

Ich verwende jQuery Sortable, um Benutzern das Ziehen und Ablegen von Elementen auf der Seite zu ermöglichen. Wenn ein Benutzer ein div zieht, muss ich die aktualisierte Reihenfolge der Liste abrufen und sie an das Back-End übergeben. Bisher habe ich es versucht:

aber das macht die Animation wirklich nicht glatt und warnt keine Daten. Wie bekomme ich jedes Mal eine Positionsliste, wenn ein Benutzer ein div zieht und löscht?

JSFIDDLE

Answer 1

Es gibt eine refreshPositions() Funktion können Sie verwenden, die ein Objekt, das die sortierbare Element zurückgibt. Sie können dann die aktualisierte Liste der untergeordneten Objekte abrufen, indem Sie .children() für dieses Objekt anrufen.

Speichern Sie die Positionen in einer Variablen im stop-Ereignis, das nach dem Sortieren ausgelöst wird.

ich Ihre Funktion gehören die stop Ereignis aktualisiert haben:

$("#sortable").sortable({ 
    stop: function(ev, ui) { 
    //Get the updated positions by calling refreshPositions and then .children on the resulting object. 
    var children = $('#sortable').sortable('refreshPositions').children(); 
    console.log('Positions: '); 
    //Loopp through each item in the children array and print out the text. 
    $.each(children, function() { 
     console.log($(this).text().trim()); 
    }); 
    } 
}); 

Updated Fiddle

Answer 2

Verwenden Sie stattdessen die toArray() Methode, hier detailliert beschrieben: http://api.jqueryui.com/sortable/#method-toArray