jquery Connect ordenable Con llamadas al método de actualización dos veces

Question

En el código siguiente, la función de actualización recibe dos llamadas cuando un elemento se mueve de la lista sortable1 a sortable2. Aunque necesito llamar a esa función solo una vez:

$("#sortable1 tbody, #sortable2 tbody").sortable({ 
    connectWith: '.connectedSortable tbody', 
    helper: fixHelper, 
    handle : '.handle', 
    update : function() { 
     var order = $('#sortable1 tbody').sortable('serialize'); 
    }  
}).disableSelection(); 

Answer 1

Acabo de toparme con esto. Es un error en jQuery UI, vea http://bugs.jqueryui.com/ticket/4872#comment:2

Comenté para ver si puedo despertar a alguien sobre cuándo habrá una solución. Las alegrías del desarrollo impulsado por la comunidad: P

Answer 2

Debe utilizar el evento de recepción (http://jqueryui.com/demos/sortable/#event-receive).

Consulte la resolución en la parte inferior en http://bugs.jqueryui.com/ticket/3178.

Answer 3

Respuesta de: http://forum.jquery.com/topic/sortables-update-callback-and-connectwith

update: function(e,ui) { 
    if (this === ui.item.parent()[0]) { 
     //your code here 
    } 
} 

Answer 4

Prueba esto:

update: function(e,ui) { 
    if (!ui.sender) { 
     //your code here 
    } 
} 

Answer 5

respuesta de Stefan era bueno, pero no menciona una pieza más del rompecabezas, así que aquí está - en el caso alguien (como yo) no lo entiende de inmediato. Esto debería hacer posible para que usted pueda manejar todo en la función update() ya no tiene que meterse con (que se disparará única cuando los movimientos inter-contenedores ocurren):

update: function(e,ui) { 
    if (this === ui.item.parent()[0]) { 
     if (ui.sender !== null) { 
      // the movement was from one container to another - do something to process it 
      // ui.sender will be the reference to original container 
     } else { 
      // the move was performed within the same container - do your "same container" stuff 
     } 
    } 
} 

Answer 6

Cómo sobre el uso retire , recibir y actualizar para capturar todos los cambios y enviarlos al servidor como una matriz?

Demostración: http://jsfiddle.net/r2d3/p3J8z/

$(function(){ 

    /* Here we will store all data */ 
    var myArguments = {}; 

    function assembleData(object,arguments) 
    {  
     var data = $(object).sortable('toArray'); // Get array data 
     var step_id = $(object).attr("id"); // Get step_id and we will use it as property name 
     var arrayLength = data.length; // no need to explain 

     /* Create step_id property if it does not exist */ 
     if(!arguments.hasOwnProperty(step_id)) 
     { 
      arguments[step_id] = new Array(); 
     } 

     /* Loop through all items */ 
     for (var i = 0; i < arrayLength; i++) 
     { 
      var image_id = data[i]; 
      /* push all image_id onto property step_id (which is an array) */ 
      arguments[step_id].push(image_id);   
     } 
     return arguments; 
    } 

    /* Sort images */ 
    $('.step').sortable({ 
     connectWith: '.step', 
     items : ':not(.title)', 
     /* That's fired first */  
     start : function(event, ui) { 
      myArguments = {}; /* Reset the array*/ 
     },  
     /* That's fired second */ 
     remove : function(event, ui) { 
      /* Get array of items in the list where we removed the item */   
      myArguments = assembleData(this,myArguments); 
     },  
     /* That's fired thrird */  
     receive : function(event, ui) { 
      /* Get array of items where we added a new item */ 
      myArguments = assembleData(this,myArguments);  
     }, 
     update: function(e,ui) { 
      if (this === ui.item.parent()[0]) { 
       /* In case the change occures in the same container */ 
       if (ui.sender == null) { 
        myArguments = assembleData(this,myArguments);  
       } 
      } 
     },  
     /* That's fired last */   
     stop : function(event, ui) {     
      /* Send JSON to the server */ 
      $("#result").html("Send JSON to the server:<pre>"+JSON.stringify(myArguments)+"</pre>");   
     }, 
    }); 
}); 

Aquí está la explicación completa de la solución: http://r2d2.cc/2014/07/22/jquery-sortable-connectwith-how-to-save-all-changes-to-the-database/

Answer 7

Con el fin de llamar al evento una vez, puede utilizar receive método. Se llama cuando un elemento de una lista se coloca en otra lista.

$(".selector").sortable({ 
    stop: function(event, ui) {} 
}); 

Fuente: http://api.jqueryui.com/sortable/#event-receive.

Answer 8

update: function(e, ui) { 
    var draggedOut = this !== ui.item.parent()[0] && !$.contains(this, ui.item.parent()[0]); 
    var draggedIn = ui.sender !== null; 
    var sameList = !draggedOut && !draggedIn; 

    if (sameList || draggedIn) { 
     // Do stuff 
    } 
}