下拉事件不会在chrome中触发 [英] Drop event not firing in chrome

问题描述

我假设当被拖动的元素在目标上方释放时，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'）。 ，'red'）; 
}）
  

解决方案

为了在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） ''这里'）。css（'background'，'red'）; 
}）
 $（'。drop'）。on（'dragover'，function（event）{
 event.preventDefault（）; 
}）
  

有关更多信息，请查看 MDN页面。

It seems the drop event is not triggering when I would expect.

I assume that the drop event fires when an element that is being dragged is releases above the target element, but this doesn't seem to the the case.

What am I misunderstanding?

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

解决方案

In order to have the drop event occur on a div element, you must cancel the ondragenter and ondragover events. Using jquery and your code provided...

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

For more information, check out the MDN page.

这篇关于下拉事件不会在chrome中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！