Событие падения не срабатывает в хроме

Кажется, событие 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');
})

Ответы

Ответ 1

Чтобы событие drop произошло в элементе div, вы должны отменить события 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.

Ответ 2

Вы можете уйти, просто выполнив event.preventDefault() в событии dragover. При этом произойдет событие drop.

Ответ 3

Для того, чтобы событие капли запускалось, вам нужно назначить 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.