jQuery UI Sortable, wie aktuelle Position und neuen Standort in Aktualisierungsereignis bestimmen?

Question

ich habe:

<ul id="sortableList">
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
</ul>

Ich habe in die update: function(event, ui) { } verdrahtet, aber ich bin nicht sicher, wie die ursprüngliche und die neue Position des Elements zu erhalten. Wenn i 3 bewegen Artikel oben unter Punkt 1 zu sein, möchte ich die ursprüngliche Position 2 (0 basierender Index) und die neue Position von Punkt 3 auf 0 sein.

Answer 1

$('#sortable').sortable({
    start: function(e, ui) {
        // creates a temporary attribute on the element with the old index
        $(this).attr('data-previndex', ui.item.index());
    },
    update: function(e, ui) {
        // gets the new and old index then removes the temporary attribute
        var newIndex = ui.item.index();
        var oldIndex = $(this).attr('data-previndex');
        $(this).removeAttr('data-previndex');
    }
});

Answer 2

Wenn die Update-Funktion die ui.item.sortable aufgerufen wird, wurde nicht aktualisiert, aber das UI-Element visuell bewegt hat.
Auf diese Weise können Sie in der Update-Funktion alte Position und neue Position zu bekommen.

   $('#sortable').sortable({    
        update: function(e, ui) {
            // ui.item.sortable is the model but it is not updated until after update
            var oldIndex = ui.item.sortable.index;

            // new Index because the ui.item is the node and the visual element has been reordered
            var newIndex = ui.item.index();
        }    
});

Answer 3

Sie haben mehrere Möglichkeiten, die alte und die neue Position zu überprüfen. Ich würde sie in Arrays setzen.

$('#sortable').sortable({
    start: function(e, ui) {
        // puts the old positions into array before sorting
        var old_position = $(this).sortable('toArray');
    },
    update: function(event, ui) {
        // grabs the new positions now that we've finished sorting
        var new_position = $(this).sortable('toArray');
    }
});

Und Sie können dann leicht extrahieren, was Sie brauchen.

Answer 4

Ich war auf der Suche nach einer Antwort auf die gleiche Frage. auf das, was Frankie beigetragen, konnte ich sowohl den Anfang und das Ende „Aufträge“ bekommen. Ich hatte ein Problem mit variablem Umfang der var, so dass ich gespeichert sie nur als .data () anstelle von lokalen Vars:

$(this).data("old_position",$(this).sortable("toArray"))

und

$(this).data("new_position",$(this).sortable("toArray"))

Jetzt können Sie es nennen, wie dies oben (aus dem Update / End-Funktionen):

console.log($(this).data("old_position"))
console.log($(this).data("new_position"))

Kredit noch geht an Frankie:)

Answer 5

Das ist für mich gearbeitet

$('#sortable').sortable({
start: function(e, ui) {
    // puts the old positions into array before sorting
    var old_position = ui.item.index();
},
update: function(event, ui) {
    // grabs the new positions now that we've finished sorting
    var new_position = ui.item.index();
}
});

Answer 6

Dies funktioniert für mich,

$('#app').sortable({
    handle: '.handle',

    start: function(evt, ui){
        $(ui.item).data('old-ndex' , ui.item.index());
    },

    update: function(evt, ui) {
        var old_index = $(ui.item).data('old-ndex');
        var new_index = ui.item.index();

        alert('old_index -'+old_index+' new index -'+new_index);

    }
});