jQuery live draggable/live droppable?

Question

Básicamente hay dos tablas: Empresas y visitantes. Actualmente es posible arrastrar visitantes a las empresas. Funciona genial. Tan pronto como se produce la función de soltar, hay dos $ .post. El primero guarda el arrastre a la base de datos. El segundo actualiza a los visitantes, porque la información cambia constantemente. El problema, sin embargo, es que tan pronto como el segundo $ .post termina, Firebug sigue apareciendo el error siguiente:

d(this).data("draggable") is null 

que se produce en el archivo de interfaz de usuario jQuery. En la línea 56.

aproximadamente 400 veces más o menos. Básicamente, estoy buscando una forma de hacer live() con arrastrar y soltar.

Los .draggables están en #visitores (un ul). Los droppables están en #companies (una tabla).

Gracias!

$(".draggable").draggable({ 
    revert:true 
}); 
$(".droppable").droppable({ 
    drop: function(ev, ui) { 
     $(this).text($(ui.draggable).text()); 

     $.post('planning/save_visit', {user_id: $(ui.draggable).attr('id'), company_id: $(this).attr('id'), period: $('ul.periods li.active').attr('id')}); 

     $.post('planning/' + $('ul.periods li.active').attr('id'), {visitors:true}, function(data){ 
      $('#visitors').html(data); 
     }); 
    }, 
    hoverClass: 'drophover' 
}); 

Answer 1

Al volver a cargar los visitantes va a sustituir todos los elementos que pueden arrastrarse cuando haces $('#visitors').html(data); - por lo que aquellos que pueden arrastrarse había antes se eliminan y se sustituyen con nuevos elementos que no se pueden arrastrar. (estoy bastante seguro de que comprende esto, debido a mencionar .live(), por lo que este es en realidad aquí para completar)

Sin embargo, usted sabe exactamente cuando se cambian los elementos de los visitantes, por lo que en lugar de una alternativa a .live() ¿por qué no hacer otra solicitud para el efecto arrastrable inmediatamente después del cambio? Podría ser más seguro "destruir" las viejas arrastrables antes de reemplazarlas, pero no estoy seguro si eso es estrictamente necesario.

$.post('planning/' + $('ul.periods li.active').attr('id'), {visitors:true}, function(data){  
    $(".draggable").draggable("destroy"); 
    $('#visitors').html(data); 
    $(".draggable").draggable({ revert:true }); 
}); 

Answer 2

1) Crear elementos x

<div class='dropzone'></div> 
<div class='droppableItem'></div> 

2) Añade Listener a todas las Zonas de saltos

$(".dropzone").liveDroppable({ hoverClass:'drophover', accept:'.droppableItem' }); 

3) Definir función personalizada liveDroppable

(function ($) { 
    $.fn.liveDroppable = function (opts) { 
     this.live("mouseenter", function() { 
     if (!$(this).data("init")) { 
      $(this).data("init", true).droppable(opts); 
     } 
     }); 
     return $(); 
    }; 
}(jQuery)); 

4) Cada vez que se agregar programáticamente una nueva zona de caída Sólo tiene que llamar ..

$(".dropzone").mouseenter(); 

Resultado: añaden Programatically o zonas de saltos 'en vivo' se harán lanzables.