dragover 上的浏览​​器响应 - html5 拖放

Posted

技术标签:

【中文标题】dragover 上的浏览​​器响应 - html5 拖放【英文标题】:browser response on dragover - html5 drag and drop 【发布时间】:2017-02-05 03:21:21 【问题描述】:

我正在使用html5拖放。

当我从任何给定网页拖动图像或链接时,浏览器窗口正在识别拖动事件。

例如,将图像拖到浏览器选项卡上,会使浏览器切换窗口。例如,将链接拖动到书签也是如此。

现在,当我拖动自定义可拖动元素时,浏览器没有反应。有没有办法改变这种行为?

【问题讨论】:

显示你的代码。 【参考方案1】:

我不明白您想要实现什么,但是当您将自定义元素移到文档或窗口之外时,您似乎想要做一些事情。

您应该尝试使用dragleave 或类似的东西绑定处理程序。这是example from another question:

var dropTarget = $('.dropTarget'),
    html = $('html'),
    showDrag = false,
    timeout = -1;

html.bind('dragenter', function () 
    dropTarget.addClass('dragging');
    showDrag = true; 
);
html.bind('dragover', function()
    showDrag = true; 
);
html.bind('dragleave', function (e) 
    showDrag = false; 
    clearTimeout( timeout );
    timeout = setTimeout( function()
        if( !showDrag ) dropTarget.removeClass('dragging'); 
    , 200 );
);

我认为这对你有用,但为了进一步的帮助,你应该扩展你的问题描述。

我也会留下一些HTML5 drag and drop docs here

【讨论】:

以上是关于dragover 上的浏览​​器响应 - html5 拖放的主要内容,如果未能解决你的问题,请参考以下文章

是否可以以编程方式捕获浏览器中页面上的所有事件?

如何检测 HTML 页面上的文件拖动

HTML5拖放的dragover vs dragenter事件

如何在 dragover/dragenter HTML 5 拖放期间更改图标

如何从dragover事件中获取源节点

PhoneGap - 与 Android 上的浏览​​器相比性能较差