HTML5拖放行为

Question

我正在广泛使用HTML5本机拖放,它几乎完全表现自己,只有一个小例外.

当任何东西被拖到页面上时,我正在尝试突出显示我的下拉区域.我最初试图通过在文档体上放置jQuery侦听器来实现这一点,如下所示:

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

使用lightdz()和dimdz()更改页面上所有dropzones的背景颜色样式属性,使它们脱颖而出.这没用.每当拖动的对象进入页面上的子元素(如div容器)时,侦听器就会将其标记为dragleave事件并使dropzones变暗.

我通过将侦听器应用于页面上的所有可见元素而不仅仅是正文来解决这个问题.当它跨越一个元素和另一个元素之间的边界时,它们偶尔会出现轻微的可见闪烁,但它看起来很好.

无论如何,现在我已经改变了lightdz()和dimdz(),以便他们将快速的jQuery fadeTo()动画应用到所有非dropzones.这在它工作时看起来很棒,并且使用户非常清楚他们可以做什么,也不能放弃.麻烦的是当它在元素边界之间传递时,它应用淡入淡出动画.这是一个很多比的背景颜色偶尔闪烁更加明显,尤其是如果对象拖到多个边界的速度非常快,它会排队的动画和在页面淡入和淡出反复.

即使我不与fadeTo()动画打扰,只是更改不透明度,这是一个很大比背景色闪烁更加明显,因为整个页面的变化,而不只是悬浮窗元素.

有没有办法将整个页面作为单一元素引用以用于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.如果它在其他任何地方发生,则它将具有非零值.