Cómo recuperar matriz de ID de contenedor después de la clasificación usando jQuery puede ordenar?

Question

me han marcado siguiente y javascript para ordenar algunos artículos. Los elementos se pueden clasificar dentro de un bloque o en otros bloques. Funciona, pero tengo un problema en la recuperación de la identificación correcta del bloque después de que un elemento se mueve de un bloque a otro.

Por ejemplo, si muevo artículo 1 dentro "Bloque 1", me sale "Estoy en el Bloque = block_1", pero si cambio de objeto 1 a 2 Bloque sigo teniendo Estoy en el Bloque 1.

Pero quiero hacer que el bloque 2 sea su contenedor principal. Necesito recuperar esta identificación para que pueda hacer un poco de ajax y actualizar la base de datos en consecuencia.

¿Puedes ayudarme a corregir esto?

<div id="blocks_sortable"> 
    <div id="block_1"> 
     <h2>Block 1</h2> 

     <div class="items_sortable connectedSortable"> 
      <div id="item_1"> 
       <span>Item 1</span></div> 
      <div id="item_2"> 
       <span>Item 2</span></div> 
      <div id="item_3"> 
       <span>Item 3</span></div> 
     </div> 
    </div> 
    <div id="block_2"> 
     <h2>Block 2</h2> 

     <div class="items_sortable connectedSortable"> 
      <div id="item_4"> 
       <span>Item 4</span></div> 
      <div id="item_5"> 
       <span>Item 5</span></div> 
      <div id="item_6"> 
       <span>Item 6</span></div> 
     </div> 
    </div> 
</div> 

<script> 
$("#blocks_sortable").sortable({ }); 
$(".items_sortable").sortable({ 
    connectWith: '.connectedSortable' 
    , forcePlaceholderSize: true 
    ,   stop : function(event, ui){ 
        alert("I am in block = "+$(this).parent().attr("id")); 
       } 
}).disableSelection();  
</script> 

Gracias.

Answer 1

Sospecho que el problema es que está utilizando el evento equivocado. Básicamente, lo que creo que está sucediendo es que el evento de detención se está disparando demasiado pronto o para el objeto equivocado.

Leería los documentos Here y vería si hay un evento más apropiado para lo que está tratando de hacer.

Creo que lo que desea es algo así como los eventos "actualizar" o "desactivar".

Ambos eventos se dispararán una vez por cada "bloque" si mueve un elemento de un "bloque" al otro.

Update sólo se disparará una vez si se mueve dentro de un bloque

Desactivar siempre se activará para todos los bloques.

Con la actualización se puede comprobar si el evento está disparando en el bloque "no original" mediante la comprobación de ui.sender:

 $(".items_sortable").sortable({ 
      connectWith: '.connectedSortable', 
      forcePlaceholderSize: true, 
      update: function(event, ui){ 
       if(ui.sender){ 
        alert(ui.item.attr("nodeName") + " in block = " + 
        $(this).parent().attr("id")); 
       } 
      } 
     }).disableSelection(); 

alertará al ID de padre sólo cuando un elemento se mueve a otro bloque . El evento se activará para ambos bloques, pero la alerta solo se mostrará para el uno "no original".

Si está utilizando AJAX para actualizar información en una base de datos Sospecho que lo que quiere es el evento al fuego para ambos bloques:

Una vez para el "original" que ahora le falta un elemento, y otro para el "nuevo" que ahora ha ganado un elemento.

No estoy muy familiarizado con exactamente lo que está haciendo o jQuery UI, por lo que no puedo ser más específico. Recuerde, los documentos son su amigo.

Espero que esto ayude.

Answer 2

quizás sea mejor, en lugar de usar el atributo id, identifica los elementos usando su índice.

modo más como

alert('I am in block' + $(this).parent().index()); 

Answer 3

Puede jugar seguro y añadir un atributo rel que mantendrá el valor del ID de padre apropiado. Tendrá que agregar un código para mantener ese atributo REL cuando mueva elementos.