È possibile utilizzare il drag-and-drop HTML5 in elementi creati dinamicamente?

Question

Modifica: so che questa sembra una domanda duplicata, ma è molto specifica per gli eventi di trascinamento HTML5. Non sto riscontrando problemi nell'aggiunta di eventi jQuery, solo la funzionalità di trascinamento della selezione HTML5.

Ho usato jQuery di base più volte per aggiungere funzionalità di trascinamento della selezione a una pagina, ma mi piacerebbe utilizzare la nuova funzionalità di trascinamento della selezione HTML5 per il mio progetto corrente. Il trascinamento funziona alla grande per qualsiasi elemento che includo nell'HTML, ma non mi sembra possibile aggiungere elementi dinamicamente e renderli trascinabili. Sospetto che ciò sia dovuto al fatto che tutti gli ascoltatori di eventi trascinabili sono associati quando la pagina viene caricata, prima che vengano creati i miei nuovi elementi. Qualcuno ha avuto fortuna usando HTML5 per rendere trascinabili gli elementi aggiunti dinamicamente? O c'è un modo per ri-associare i listener di eventi senza ricaricare la pagina?

L'utilizzo di .bind() con uno degli eventi di trascinamento HTML5 non sembra funzionare. cioè,

$(newElement).bind('drag', function(e){ 
    console.log('do you even drag, bro?'); 
}); 

non sarà mai il fuoco, anche se .bind() con un evento click funziona bene. Suppongo che questo sia dovuto al fatto che "trascinare" non significa nulla per jQuery. A proposito, sto includendo il tag HTML draggable="true" nel nuovo elemento.

Quindi, chiunque ha storie di successo per legare gli eventi di trascinamento HTML5 agli elementi creati dinamicamente o non è possibile? Grazie!

Answer 1

Ci sono due modi per farlo. Il primo è quello di utilizzare una sorta di elemento predecessore che esisterà, al momento il tuo bind() si chiama:

$('.someParent').on('drag', '.newElement', function(){ 
    console.log('do you even drag, bro?'); 
}); 

Il secondo è quello di strutturare il codice in modo che la vostra funzione bind viene chiamata dopo che il newElement viene creato:

var $newElement = $('<div class="newElement"></div>'); 

$newElement.on('drag', function(e){ 
    console.log('do you even drag, bro?'); 
});