Dinamik olarak oluşturulmuş öğelerde HTML5 sürükle ve bırak işlevini kullanmak mümkün mü?

Question

Düzenleme: Bunun yinelenen bir soru gibi göründüğünü biliyorum, ancak HTML5 sürükle etkinliklerine çok özgüdür. JQuery olaylarına eklerken sorun değil, sadece HTML5 sürükle ve bırak işlevselliği.

Bir sayfaya sürükleme ve bırakma işlevselliği eklemek için birkaç kez temel jQuery kullanıyorum, ancak mevcut projem için yeni HTML5 sürükle ve bırak özelliğini kullanmak istiyorum. Drag, HTML’de içerdiğim tüm öğeler için harika çalışıyor, ancak dinamik olarak öğeler ekleyebilmem ve bunların sürüklenebilir olmasını sağlayamıyorum. Bunun, yeni öğeler oluşturulmadan önce, sayfa yüklenirken sürüklenebilir tüm olay dinleyicilerinin bağlı olduğundan şüpheleniyorum. Dinamik olarak eklenen öğeler sürüklenebilir hale getirmek için HTML5'i kullanan hiç kimse oldu mu? Veya sayfayı yeniden yüklemeden etkinlik dinleyicilerini yeniden bağlama yolu var mı?

HTML5 sürükleme olaylarından herhangi biriyle .bind() kullanmak görünmüyor. Bir tıklama etkinlik çalışıyor ile .bind() olsa yani,

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

hiç patlamaz. Sanırım bunun nedeni "sürükleme" nin jQuery'ye hiçbir şey ifade etmemesi. Bu arada, draggable="true" HTML etiketini yeni öğeye ekliyorum.

HTML5 sürükleme olaylarını dinamik olarak oluşturulmuş öğelere bağlamak için herkesin başarı hikayeleri var mı, yoksa bu mümkün değil mi? Teşekkürler!

Answer 1

Bunu gerçekleştirmenin iki yolu vardır. ikinci

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

sizin newElement oluşturulduktan sonra senin bağlama işlevi çağrılır şekilde kodunuzu yapılandırmaya: İlk anda bağlama (var olacaktır atası elemanının çeşit) denir kullanmaktır:

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

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