Подія падіння не спрацьовує в хромі

Здається, подія падіння не спрацьовує тоді, коли я очікував.

Я припускаю, що подія 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');
})

Для того, щоб подія падіння відбулася в елементі div, ви повинні скасувати події ondragenterand 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.

Це не реальна відповідь, але для таких людей, як я, яким бракує дисципліни для послідовності. Крапля не вистрілила для мене в хромі, коли effectAllowedефект, який я призначив, не був dropEffect. Однак це працювало для мене в Safari. Це слід встановити, як показано нижче:

ev.dataTransfer.effectAllowed = 'move';

Як варіант, effectAllowedможна встановити як all, але я хотів би зберегти конкретність там, де це можливо.

для випадку, коли рухається ефект падіння:

ev.dataTransfer.dropEffect = 'move';