Событие drop не запускается в Chrome

Кажется, событие drop не запускается, когда я ожидал.

Я предполагаю, что событие drop срабатывает, когда перетаскиваемый элемент высвобождается выше целевого элемента, но, похоже, это не так.

Что я не понимаю?

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

Для того , чтобы иметь событие падения происходит на сОн элементе, вы должны отменить ondragenterи ondragoverсобытие. Используя jquery и предоставленный код ...

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

Для получения дополнительной информации посетите страницу MDN .

Вы можете избежать неприятностей, если просто примете участие event.preventDefault()в dragoverмероприятии. Это вызовет dropсобытие.

Чтобы событие drop сработало, вам нужно назначить dropEffect во время события over, иначе событие ondrop никогда не сработает:

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

Это не настоящий ответ, но для некоторых людей вроде меня, которым не хватает дисциплины для последовательности. Drop не сработал для меня в хроме, когда effectAllowedэффект был не тем, на который я рассчитывал dropEffect. Однако у меня это сработало в Safari. Это должно быть установлено, как показано ниже:

ev.dataTransfer.effectAllowed = 'move';

В качестве альтернативы effectAllowedможно установить как all, но я бы предпочел сохранить конкретность там, где это возможно.

для случая, когда эффект падения перемещается:

ev.dataTransfer.dropEffect = 'move';