jQuery live draggable/live droppable?

Question

Fondamentalmente ci sono due tabelle: aziende e visitatori. Attualmente è possibile trascinare visitatori alle aziende. Funziona alla grande. Non appena si verifica la funzione di rilascio, ci sono due $ .post. Il primo salva il trascinamento nel database. Il secondo aggiorna i visitatori, perché le informazioni cambiano costantemente. Il problema, tuttavia, è che non appena finisce il secondo $ .post, Firebug continua a comparire il seguente errore:

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

Che si verifica nel file UI jQuery. Sulla linea 56.

circa 400 volte circa. Quindi in pratica sto cercando un modo per fare live() con trascinabile e trascinabile.

I dispositivi mobili sono in #visitors (un ul). I droppable sono in #companies (una tabella).

Grazie!

$(".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

Quando ricaricare i visitatori si sta sostituendo tutte gli elementi trascinabili quando si fa $('#visitors').html(data); - così quelli c'erano trascinabili prima vengono eliminati e sostituiti con nuovi elementi che non sono trascinabili. (Sono abbastanza sicuro che ti rendi conto di questo, a causa di menzionare .live(), quindi questo è davvero solo per completezza)

Tuttavia, si sa esattamente quando gli elementi visitatori sono cambiati, così invece di un'alternativa al .live() perché non effettuare semplicemente un'altra richiesta per l'effetto trascinabile immediatamente dopo la modifica. Potrebbe essere più sicuro "distruggere" i vecchi draggables prima di sostituirli, ma non sono sicuro che sia strettamente necessario.

$.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) Creare elementi x

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

2) Aggiungi Listener a tutti DropZones

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

3) Definire funzione personalizzata liveDroppable

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

4) Ogni volta che si aggiungere programmaticamente una nuova dropzone, basta chiamare ..

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

Risultato: Programatically aggiunti o dropzones 'live' verranno effettuati droppable.