jQuery UI Sortable: Przywrócić zmiany, jeśli wywołanie zwrotne aktualizacji powoduje wywołanie AJAX, które nie powiedzie się?

Question

Używam widgetu do sortowania, aby zmienić kolejność elementów. Po przeciągnięciu elementu do nowej lokalizacji uruchamiam post z formularza AJAX na serwerze, aby zapisać nowe zamówienie. Jak mogę cofnąć sortowanie (np. Przywrócić pozycję przeciągania do pierwotnej pozycji na liście), jeśli otrzymam komunikat o błędzie z serwera?

Zasadniczo chcę zmienić kolejność, aby "trzymać", jeśli serwer potwierdzi, że zmiany zostały zapisane.

Answer 1

Jestem prawie pewna, że ​​sortable nie ma żadnej funkcji "Undo-last-drop" - ale to świetny pomysł!

W międzyczasie myślę, że najlepiej jest napisać coś w rodzaju: start, która przechowuje zamowienie, a następnie po niepowodzeniu wywołać funkcję przywracania. To znaczy. coś takiego:

$("list-container").sortable({ 
    start: function() { 
      /* stash current order of sorted elements in an array */ 
     }, 
    update: function() { 
      /* ajax call; on failure, re-order based on the stashed order */ 
     } 
}); 

Chciałbym wiedzieć, czy inni mają lepszą odpowiedź.

Answer 2

Spróbuj wykonać następujące czynności:

$(this).sortable('cancel'); 

Answer 3

prostu napotkał ten sam problem, a ze względu na pełną odpowiedź, chciałem podzielić się moją rozwiązanie tego problemu:

$('.list').sortable({ 
    items:'.list:not(.loading)', 
    start: function(event,ui) { 
    var element = $(ui.item[0]); 
    element.data('lastParent', element.parent()); 
    }, 
    update: function(event,ui) { 
    var element = $(ui.item[0]); 
    if (element.hasClass('loading')) return; 
    element.addClass('loading'); 
    $.ajax({ 
     url:'/ajax', 
     context:element, 
     complete:function(xhr,status) { 
     $(this).removeClass('loading'); 
     if (xhr.status != 200) { 
      $($(this).data('lastParent')).append(this); 
     } 
     }, 
    }); 
    } 
}); 

you” Będziesz musiał zmodyfikować go tak, by pasował do twojego kodu, ale jest to całkowicie bezpieczne rozwiązanie wielowątkowe, które działa bardzo dobrze.