javascript - HTML5 拖放行为

Question

我正在广泛使用 HTML5 原生拖放功能，它几乎完全正常运行，只有一个小异常(exception)。

我试图在页面上拖动任何内容时突出显示我的拖放区。我最初试图通过将 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() 动画应用到所有非拖放区。这在工作时看起来很棒，并且让用户非常清楚他们可以和不可以把东西放在什么上面。问题是当它在元素边界之间通过时，它会应用淡入淡出动画。这比背景颜色的偶尔闪烁要明显得多，特别是因为如果对象被快速拖过多个边界，它将排队动画并让页面反复淡入淡出。

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

为了 dragover 和 dragleave 事件的目的，有什么方法可以将整个页面作为单个元素引用吗？如果做不到这一点，是否有任何方法可以检测到浏览器窗口外发生的掉落？如果我跳过 dragleave 事件，它看起来很好，但如果将任何对象拖过浏览器窗口然后放到它外面，整个页面将保持淡色。

Answer 1

我真的为这件事的简单性感到尴尬。

$("*: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。如果它发生在其他任何地方，它将具有非零值。