Wydarzenie upuszczania nie uruchamia się w chromie

Wygląda na to, że upuszczenie nie uruchamia się, gdy bym się spodziewał.

Zakładam, że zdarzenie upuszczania jest uruchamiane, gdy przeciągany element zostanie zwolniony powyżej elementu docelowego, ale wydaje się, że tak nie jest.

Co ja nie rozumiem?

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');
})

Aby zdarzenie drop wystąpiło w elemencie div, należy anulować zdarzenia ondragenteri ondragover. Używając jquery i dostarczonego kodu ...

$('.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();
})

Aby uzyskać więcej informacji, odwiedź stronę MDN .

Możesz uciec po prostu event.preventDefault()na dragoverimprezie. Spowoduje to uruchomienie dropzdarzenia.

Aby zdarzenie drop zostało uruchomione, musisz przypisać efekt dropEffect podczas zdarzenia over, w przeciwnym razie zdarzenie ondrop nigdy nie zostanie wyzwolone:

$('.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.

To nie jest właściwa odpowiedź, ale dla niektórych ludzi, takich jak ja, którym brakuje dyscypliny do konsekwencji. Drop nie odpalił dla mnie w chromie, gdy effectAllowednie był to efekt, na który się zdecydowałem dropEffect. Jednak zadziałało to dla mnie w Safari. Należy to ustawić jak poniżej:

ev.dataTransfer.effectAllowed = 'move';

Alternatywnie effectAllowedmożna ustawić jako all, ale wolałbym zachować szczegółowość tam, gdzie mogę.

w przypadku, gdy efekt upuszczenia się porusza:

ev.dataTransfer.dropEffect = 'move';