我广泛使用了 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。如果它发生在其他地方,则它将具有非零值。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)