Ist es möglich, den HTML5 Drag-and-Drop in dynamisch erstellten Elementen zu verwenden?

Question

Bearbeiten: Ich weiß, dass dies wie eine doppelte Frage aussieht, aber es ist sehr spezifisch für die HTML5-Drag-Ereignisse. Ich habe kein Problem beim Hinzufügen von jQuery-Ereignissen, nur die HTML5-Drag & Drop-Funktionalität.

Ich habe einige Male jQuery verwendet, um einer Seite Drag-and-Drop-Funktionalität hinzuzufügen, aber ich möchte die neue HTML5-Drag-and-Drop-Funktion für mein aktuelles Projekt verwenden. Ziehen eignet sich hervorragend für jedes Element, das ich in HTML einfüge, aber ich kann Elemente nicht dynamisch hinzufügen und sie ziehbar machen. Ich vermute, dass dies daran liegt, dass alle ziehbaren Ereignis-Listener gebunden sind, wenn die Seite geladen wird, bevor meine neuen Elemente erstellt werden. Hat jemand mit HTML5 Glück gehabt, dynamisch hinzugefügte Elemente ziehbar zu machen? Oder gibt es eine Möglichkeit, Ereignislistener neu zu binden, ohne die Seite neu zu laden?

Die Verwendung von .bind() mit einem der HTML5-Drag-Ereignisse scheint nicht zu funktionieren. das heißt,

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

wird nicht immer ausgelöst, obwohl .bind() mit einem Click-Ereignis gut funktioniert. Ich vermute, das ist, weil "ziehen" nichts zu jQuery bedeutet. Ich nehme übrigens das HTML-Tag draggable="true" in das neue Element auf.

Hat also jemand Erfolgsgeschichten für das Binden der HTML5-Ziehereignisse an dynamisch erzeugte Elemente, oder ist das nicht möglich? Vielen Dank!

Answer 1

Es gibt zwei Möglichkeiten, dies zu erreichen. Die erste ist eine Art Vorfahre Element zu verwenden, die zum Zeitpunkt Ihrer binden existieren wird() aufgerufen:

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

Der zweite ist der Code zu strukturieren, so dass Ihre bind Funktion nach dem newElement erstellt wird, aufgerufen wird:

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

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