首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在chrome中不触发Drop事件

在chrome中不触发Drop事件
EN

Stack Overflow用户
提问于 2014-01-25 02:35:32
回答 4查看 57K关注 0票数 109

看起来drop事件并没有在我期望的时候触发。

我假设当被拖动的元素在目标元素上方释放时,drop事件就会触发,但情况似乎并非如此。

我误解了什么?

http://jsfiddle.net/LntTL/

代码语言:javascript
复制
$('.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');
})
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-01-25 03:36:06

为了在ondragover元素上发生drop事件,必须取消drop和drop事件。使用jquery和您提供的代码...

代码语言:javascript
复制
$('.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

票数 224
EN

Stack Overflow用户

发布于 2016-02-16 17:32:13

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

票数 59
EN

Stack Overflow用户

发布于 2016-03-25 02:35:52

为了触发drop事件,您需要在over事件期间分配一个dropEffect,否则ondrop事件永远不会被触发:

代码语言:javascript
复制
$('.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.
票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21339924

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档