Czy można używać funkcji przeciągania i upuszczania HTML5 w dynamicznie tworzonych elementach?

Question

Edycja: wiem, że wygląda to jak zduplikowane pytanie, ale jest bardzo specyficzne dla zdarzeń przeciągania HTML5. Nie mam problemu z dodawaniem zdarzeń jQuery, tylko funkcją przeciągania i upuszczania HTML5.

Kilka razy użyłem podstawowej wersji jQuery, aby dodać funkcję przeciągania i upuszczania do strony, ale chciałbym użyć nowej funkcji przeciągania i upuszczania HTML5 dla mojego bieżącego projektu. Przeciąganie działa doskonale dla dowolnego elementu, który dołączam do kodu HTML, ale nie mogę dynamicznie dodawać elementów i można je przeciągać. Podejrzeń jest tak, ponieważ wszystkie przeciągalne detektory zdarzeń są powiązane, gdy strona jest ładowana, zanim moje nowe elementy zostaną utworzone. Czy ktokolwiek miał szczęście przy użyciu HTML5, aby dynamicznie dodawać elementy do przeciągnięcia? Czy istnieje sposób na ponowne wiązanie detektorów zdarzeń bez ponownego ładowania strony?

Użycie dowolnego z zdarzeń przeciągania HTML5 nie działa. tj,

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

nigdy nie będzie ogień, choć .bind() z zdarzenie click działa dobrze. Zgaduję, że to dlatego, że "przeciągnij" nic nie znaczy dla jQuery. W każdym razie dołączam tag HTML draggable="true" do nowego elementu.

Ktoś ma historie sukcesu do wiązania zdarzeń przeciągania HTML5 z dynamicznie tworzonymi elementami, czy też nie jest to możliwe? Dzięki!

Answer 1

Istnieją dwa sposoby osiągnięcia tego. Pierwszym jest użycie jakiegoś elementu przodka, który będzie istniał w tym czasie swoją bind() jest wywoływana:

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

Drugi jest do struktury kodu tak, że czynność wiążą zostanie wywołany po swoją newElement zostanie utworzony:

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

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