Question

当我期待时，似乎没有触发掉落事件。

我假设当被拖动的元素在目标元素上方释放时会触发drop事件，但这似乎不是这样。

我误解了什么？

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

有关详细信息，请查看the MDN page。

Answer 2

您只需在event.preventDefault()事件上执行dragover即可。这样做会触发drop事件。

Answer 3

这不是一个实际的答案，但是对于像我这样的缺乏一致性准则的人来说。当effectAllowed达不到我为dropEffect设置的效果时，在Chrome中Drop不会对我有效。但是，它确实对我在Safari中起作用。设置如下：

ev.dataTransfer.effectAllowed = 'move';

或者，effectAllowed可以设置为all，但我希望在可能的地方保持具体性。

对于移动拖放效果的情况：

ev.dataTransfer.dropEffect = 'move';

Answer 4

为了触发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.

丢弃事件未在chrome中触发

4 个答案: