悬停时的 jQuery 拖放闪烁(仅限 Webkit) [英] jQuery Drag-and-Drop Flickering on Hover (Webkit only)

问题描述

我刚刚完成了一项功能，用户可以将文件拖放到浏览器中并放置在支持文件上传插件上，该插件会处理拖放.

I've just finished implementing a feature in which users can drag files into the browser and drop upon a supporting File Upload plugin, which processes the drop.

然而，为了给用户一个提示，他们甚至可以在第一时间放下东西，我实现了一个 dragover 事件来显示一个 div 说类似于Drop Here"的东西.反过来，这会隐藏具有选择文件..."按钮的 div，并替换它，直到用户停止拖动.

However, in order to give users a hint that they can even drop things in the first place, I've implemented a dragover event to show a div that says something akin to "Drop Here". This, in turn, hides the div which has the "Choose File..." button, and replaces it, until the user stops dragging.

但似乎，当我实现这个时，在目标区域上拖动会导致闪烁.说清楚:

But it seems, when I implement this, dragging over the target area is causing flickering. To be clear:

• div 显示选择文件"界面.
• 拖动的项目(或拖动的选定文本)；显示放在这里".
• 项目被拖到放在这里"区域；开始闪烁.

• div with "Choose File" interface is shown.
• Item dragged (or selected text dragged); "Drop here" is shown.
• Item dragged over the "Drop here" area; flickering begins.

另外:

• 在 Opera 12 或 Firefox 16 中没有问题.
• 这个问题在 Chrome 23 和 Safari 5 中非常明显.
• 问题部分存在于 IE 9 中(IE 10 未经测试)；闪烁约 5 秒钟，然后停止.

(警告:小提琴非常粗糙.)

只需选择一些文本并将其拖到蓝色框上，您就会看到会发生什么；它不应该表现出的行为很明显.

Just select some of the text and drag it over the blue box and you will see what happens; it will be obvious the behavior it should not be exhibiting.

var $dropTarget = $("#container");
$(document).bind("dragover", function(e) {
    if ($dropTarget.hasClass("highlight"))
        return;

    $dropTarget.addClass("highlight");
    $dropTarget.find("[name='drop']").show();
    $dropTarget.find("[name='drag']").hide();
}).bind("dragleave drop", function(e) {
    if (!$dropTarget.hasClass("highlight"))
        return;

    $dropTarget.removeClass("highlight");
    $dropTarget.find("[name='drop']").hide();
    $dropTarget.find("[name='drag']").show();
});​

我的解决方案...?

说实话，我不知道该尝试什么.没有关于 dragover 或 dragleave 行为的大量文档，我什至不知道为什么会这样，所以我什至无法开始调试它.我觉得 dragover 应该只触发一次，但即使在屏幕上拖动也会一遍又一遍地触发它.

My solution...?

To be honest, I've got no idea of what to try. There is not extensive documentation on the behavior of dragover or dragleave, and I don't even know why this is happening, so I can't even begin to debug it. I feel like dragover should only fire once, but even dragging around the screen just fires it over and over and over again.

我查看了 Google 图片和 Google 联系人的拖放行为，但它们的代码已完全缩小且不可读，我什至找不到任何指定的拖动"行为.

I've looked at Google Images and Google Contacts for their drag-and-drop behavior, but their code is completely minified and unreadable, and I can't even find any specified "drag" behavior.

那么，对于这种看似奇怪的行为有什么解决办法吗?如果这是我怀疑的 WebKit 中的错误，是否有一些出色的解决方法和/或我可以使用的 hack?

So, is there some fix to this seemingly odd behavior? If this is a bug in WebKit, which I suspect, is there some brilliant workaround and/or hack I can use?

感谢大家的宝贵时间！

推荐答案

经过一个多小时的摸索，发现有类似问题的人.似乎 Chrome 和 Safari(至少 5 个)会在输入子元素时触发 dragleave(并且似乎是在对该元素进行任何更改时，包括显示/隐藏的子元素).

After over an hour of scouring, I found someone who had a similar type of issue. It seems that Chrome and Safari (5, at least) fire dragleave upon entering a child element (and seemingly, upon any changes to that element, including the children being shown/hidden).

解决方法是检查pageX和pageY是否等于dragleave内的0(但不是 drop).

The solution is to check if pageX and pageY are equal to 0 within dragleave (but not drop).

var $dropTarget = $("#container");
$(document).bind("dragenter", function(e) {
    if (e.target == this) {
         return;
    }
                
    $dropTarget.addClass("highlight");
    $dropTarget.find("[name='drop']").show();
    $dropTarget.find("[name='drag']").hide();
}).bind("dragleave", function(e) {
    if (e.originalEvent.pageX != 0 || e.originalEvent.pageY != 0) {
        return false;
    }
    
    // Could use .trigger("drop") here.
    $dropTarget.removeClass("highlight");
    $dropTarget.find("[name='drop']").hide();
    $dropTarget.find("[name='drag']").show();
}).bind("drop", function(e) {
    $dropTarget.removeClass("highlight");
    $dropTarget.find("[name='drop']").hide();
    $dropTarget.find("[name='drag']").show();
});​

这篇关于悬停时的 jQuery 拖放闪烁(仅限 Webkit)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！