HTML5 拖放行为

我广泛使用了 HTML5 原生拖放功能，它几乎完全可以正常运行，只有一个小例外。

当任何东西被拖过页面时，我试图突出显示我的拖放区。我最初尝试通过将 jQuery 侦听器放在文档正文上来实现此目的，如下所示：

$("body").live('dragover',function(event){lightdz(event)});
$("body").live('dragexit dragleave drop',function(event){dimdz(event)});

使用 lightdz() 和 dimdz() 更改页面上所有拖放区的背景颜色样式属性，使它们脱颖而出。这不起作用。每当拖动的对象进入页面上的子元素（例如 div 容器）时，侦听器都会将其标记为 Dragleave 事件并使放置区变暗。

我通过将侦听器应用于页面上的所有可见元素（而不仅仅是正文）来解决这个问题。当拖拽区穿过一个元素和另一个元素之间的边界时，偶尔会出现轻微可见的闪烁，但看起来不错。

无论如何，现在我已经更改了 lightdz() 和 dimdz() ，以便它们将快速 jQuery fadeTo() 动画应用于所有非拖放区。这看起来awesome当它工作时，让用户非常清楚他们可以和不能把东西放在上面。问题在于，当它在元素边界之间传递时，它会应用淡入淡出动画。这比背景颜色偶尔的闪烁要明显得多，特别是因为如果将对象非常快速地拖动到多个边界上，它将对动画进行排队并使页面反复淡入和淡出。

即使我不关心 fadeTo() 动画，而只是更改不透明度，它也比背景颜色闪烁更明显，因为整个页面发生了变化，而不仅仅是 dropzone 元素发生了变化。

有没有什么方法可以将整个页面作为单个元素引用，以用于 Dragover 和 Dragleave 事件？如果做不到这一点，有什么方法可以检测发生在浏览器窗口之外的掉落吗？如果我跳过 Dragleave 事件，它看起来不错，但如果将任何对象拖到浏览器窗口上然后放到窗口之外，整个页面就会保持褪色。

我真的为这件事如此简单而感到尴尬。

$("*:visible").live('dragenter dragover',function(event){lightdz(event)});

$("#page").live('dragleave dragexit',function(event)
{
    if(event.pageX == "0")
       dimdz(event);
});

$("*:visible").live('drop',function(event){dimdz(event)});

#page 是一个页面范围的容器。如果 Dragleave 事件将拖动的对象移出浏览器窗口，则 event.pageX 的值为 0。如果它发生在其他地方，则它将具有非零值。