悬停时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 显示选择文件界面。


• 拖动项目（或拖动选定的文字）;显示Drop here。


• 项目拖过Drop here区域;闪烁开始。

• 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.

我看过谷歌图片和谷歌联系人的拖放行为，但他们的代码完全缩小，不可读，我甚至找不到任何指定的拖动行为。

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中的一个错误，我怀疑，是否有一些出色的解决方法和/或黑客我可以使用？

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 children being shown/hidden).

解决方法是检查 pageX 和 pageY 等于 0 dragleave （但不 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屋！