Conferma jQuery ordinabili ricevere evento

Question

Ho due liste separate: ul list-A e B-list

entrambi sono ordinabili grazie al plugin jQuery UI.

utenti del progetto su cui sto lavorando vuole confermare l'azione quando gli elementi vengono spostati da un elenco all'altro, ma non che si spostano all'interno della stessa lista. Quando un'azione viene attivata, la pagina avvierà una richiesta Ajax al server per aggiornare le posizioni della/e lista/i.

Ciò che mi preoccupa è l'ordine degli eventi. La mia esperienza fino ad ora è che l'evento di aggiornamento viene attivato prima dell'evento di ricezione, quindi prima che venga visualizzata la finestra di conferma, è già stata avviata una richiesta.

Purtroppo ho dimenticato quale delle liste che attivano la richiesta ma nel mio caso non importa davvero: se un elemento viene trascinato su un'altra lista, nulla deve essere inviato al server fino a quando l'utente non ha confermato l'azione.

Ho usato jQuery un bel po 'ma penso che potrei usare un po' di aiuto su questo.

Javascript:

$('.sortable').sortable({ 
    start: function (event, ui) { 
     $(ui.helper).addClass("sortable-drag-clone"); 
    }, 
    stop: function (event, ui) { 
     $(ui.helper).removeClass("sortable-drag-clone"); 
    }, 
    update: function (event, ui) { 

     if ($(ui.sender).length == 0) { 
      alert("item was moved within the same list."); 
      //Make request 
     } else { 
      //do nothing. 
     } 
    }, 
    receive: function (event, ui) { 
     if (confirm("show move or copy dialog, from {0} to {1}")) { 
      //do request 
     } else { 
      $(ui.sender).sortable("cancel"); 
      //no request 
     } 
    }, 
    tolerance: "pointer", 
    connectWith: ".sortable", 
    placeholder: "sortable-draggable-placeholder", 
    forcePlaceholderSize: true, 
    appendTo: 'body', 
    helper: 'clone', 
    zIndex: 666 
}).disableSelection(); 

Markup:

<div id="list-A"> 
    <ul class="sortable"> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
    </ul> 
</div> 
<div id="list-B"> 
    <ul class="sortable"> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
    </ul> 
</div> 

Aggiornamento:

scenario I) utente trascina da A1 a A3 - risultato è alcuna finestra così conferma una richiesta viene inviata a th e server in modo che il nuovo ordinamento sia persistente.

Scenario II) utente trascina A1 a B3 (o B3 a A1) - risultato è una finestra di conferma e poi, solo se la finestra di dialogo viene accettato, viene inviata una richiesta al server. Questo è il punto in cui mi sono stabilito con due richieste, come ho descritto in uno dei miei commenti.

Answer 1

Non è necessario il metodo update quindi, è sufficiente rimuoverlo! Example link.