我正在广泛使用HTML5本地拖放功能,它几乎完全正常,只有一个小问题。
当页面上有任何东西被拖动时,我想要突出显示我的放置区域。最初我尝试通过在文档主体上放置jQuery监听器来实现这一点,代码如下:
$("body").live('dragover',function(event){lightdz(event)});
$("body").live('dragexit dragleave drop',function(event){dimdz(event)});
使用lightdz()和dimdz()修改页面上所有拖放区域的背景颜色样式属性,以使它们突出显示。但是这并没有起作用。每当拖动对象进入页面上的子元素(例如div容器)时,监听器都会将其标记为dragleave事件并降低拖放区的亮度。
我通过将监听器应用于页面上的所有可见元素而不仅仅是body来解决了这个问题。当它穿过一个元素到另一个元素的边界时,拖放区域偶尔会有轻微的可见闪烁,但看起来还不错。
无论如何,现在我已经改变了lightdz()和dimdz(),使它们对所有非拖放区域应用了一个快速的jQuery fadeTo()动画。当它工作时,看起来很棒,并且让用户非常清楚地知道他们可以和不能够在哪里投放东西。问题是当它通过元素边界时,它将应用淡入淡出动画。这比偶尔的背景颜色闪烁更加明显,特别是因为如果对象在多个边界上快速拖动,它将排队播放动画并使页面反复淡入淡出。
即使我不费心使用fadeTo()动画,只是改变透明度,它比背景颜色闪烁更加明显,因为整个页面发生变化而不仅仅是拖放区域元素。
有没有办法将整个页面作为单个元素参考拖放和离开事件?如果无法做到这一点,是否有任何办法检测发生在浏览器窗口外的丢弃操作?如果跳过dragleave事件,则看起来很好,但是如果将任何对象拖动到浏览器窗口之外然后将其放下,则整个页面都会变暗。