2010-04-18 17 views
11

llamo sortable.stop() para realizar una llamada ajax para almacenar algunos datos después de arrastrar & soltar la operación.JQuery UI ordenable: restaurar la posición en función de alguna condición

Cuando la llamada ajax devuelve un error (error de lógica de la aplicación o problema de red) Quiero mover el elemento arrastrado a su posición original/inicio, ¿cómo puedo lograrlo?

El escenario debe ser

  1. usuario arrastra la A a la B
  2. caso sortable.stop() se llama, se dispara una llamada ajax
  3. la llamada ajax devuelve un error
  4. dentro del evento stop() nos obtener el error ajax
  5. mover A a su posición original
  6. usuario mover nuevamente A a B
  7. todo está bien
  8. A permanece en su nueva posición en B

Pasos 6-8 se muestran para aclarar una carga sucesiva se puede hacer y de error anterior se debe olvidar.

Respuesta

22

Echa un vistazo a .sortable('cancel'); algo como esto:

var list = $('#some-list') 
list.sortable(
{ 
    // Some options. 
    stop: function() 
    { 
     $.post('some-url', someData, function() 
     { 
      if (somethingWentWrong) 
      { 
       list.sortable('cancel'); 
      } 
     }); 
    } 
}); 
+5

Bajo la función callback stop() no funciona, así que he usado receive() en lugar de stop() y cancelled drop con $ (ui.sender) .sortable ('cancel'); – dafi

+0

esto funcionó para mí y me salvó algunas molestias. ¡No necesité usar el código de @dafi pero me alegro de saberlo ahora! :) – CommentLuv

6

Gracias a dafi - esto funciona para mí:

$('#some-list').sortable({ 
    // other options here, 
    receive: function(event, ui) { 

    // ajax or function here 
    if(somethingWentWrong) { 
     $(this).sortable('cancel'); 
     $(ui.sender).sortable('cancel'); 
    } 

    } 

}); 

no estoy seguro de si necesita $(this).sortable('cancel');, pero calculo que lo mejor es cancelar la fuente y las listas ordenables de destino. De esta forma, el elemento de la lista revierte inmediatamente. Otro ordenable options aquí.

0

Gracias, liveat60fps, es la segunda declaración de las dos que solo necesita.

$('#some-list').sortable({ 

     // other options here, 
    receive: function(event, ui) { 

    // ajax or function here 
    if(somethingWentWrong) { 
     $(this).sortable('cancel'); 
     $(ui.sender).sortable('cancel'); 
    }  
    }  
}); 

De esta manera, en una determinada condición, puede volver al estado original.

Cuestiones relacionadas