Drop 事件未在 chrome 中觸發

Question

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

Answer 1

為了讓 div 元素上發生 drop 事件，您必須取消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 頁面。

Answer 2

您只需在dragover事件上執行event.preventDefault()即可逃脫。 這樣做會觸發drop事件。

Answer 3

為了觸發 drop 事件，您需要在 over 事件期間分配 dropEffect，否則永遠不會觸發 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.

Answer 4

這不是一個實際的答案，但對於像我這樣缺乏一致性紀律的人來說。 當effectAllowed不是我為dropEffect設置的效果時，Chrome 中的 Drop 沒有為我觸發。 然而，它在 Safari 中對我有用。 這應該設置如下：

ev.dataTransfer.effectAllowed = 'move';

或者， effectAllowed可以設置為all ，但我希望盡可能保持特異性。

對於下降效果移動的情況：

ev.dataTransfer.dropEffect = 'move';