Drop olayı kromda tetiklenmiyor

Görünüşe göre düşme olayı beklediğimde tetiklenmiyor.

Sürüklenen bir öğe hedef öğenin üzerinde bırakıldığında drop olayının tetiklendiğini varsayıyorum, ancak bu durum böyle görünmüyor.

Neyi yanlış anlıyorum?

http://jsfiddle.net/LntTL/

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(){
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})

Drop olayının bir div öğesinde gerçekleşmesi için ondragenterve ondragoverolaylarını iptal etmeniz gerekir . Jquery ve sağlanan kodun kullanılması ...

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(event){
    event.preventDefault();
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})
$('.drop').on('dragover',function(event){
    event.preventDefault();
})

Daha fazla bilgi için MDN sayfasına bakın .

Sadece bir yapıyor kurtulabilir event.preventDefault()üzerine dragoverolay. Bunu yapmak dropolayı ateşleyecektir .

Drop olayının tetiklenmesi için over olayı sırasında bir dropEffect atamanız gerekir, aksi takdirde ondrop olayı asla tetiklenmez:

$('.drop').on('dragover',function(event){
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';  // required to enable drop on DIV
})
// Value for dropEffect can be one of: move, copy, link or none
// The mouse icon + behavior will change accordingly.

Bu gerçek bir cevap değil ama benim gibi tutarlılık disiplininden yoksun olan bazı insanlar için. Damla benim için effectAllowedbelirlediğim etki olmadığında kromda ateş etmedi dropEffect. Ancak Safari'de benim için çalıştı. Bu, aşağıdaki gibi ayarlanmalıdır:

ev.dataTransfer.effectAllowed = 'move';

Alternatif olarak, effectAllowedolarak ayarlanabilir all, ancak özgüllüğü elimden geldiğince tutmayı tercih ederim.

düşme efektinin hareket ettiği bir durum için:

ev.dataTransfer.dropEffect = 'move';