HTML5拖放下降行为 [英] HTML5 drag & drop behaviour

问题描述

我正在广泛使用HTML5本机拖放而且它几乎完全是自己的行为，有一个小小的例外。

当任何东西拖动到页面上时，我试图突出显示我的下拉列表。我原来试图通过将jQuery监听器放在文档正文上来实现，如下所示：

  $（body）live （ '的​​dragover'，函数（事件）{lightdz（事件）}）; 
 $（body）。live（'dragexit dragleave drop'，function（event）{dimdz（event）}）; 
  

与lightdz（）和dimdz（）更改页面上所有dropzones的背景颜色样式属性使他们脱颖而出。这没有办法。每当一个被拖动的对象在页面上输入一个子元素（像一个div容器）时，监听器就会把它标记为一个拖拽事件，并使这个dropzones变暗。

通过将侦听器应用于页面上的所有可见元素，而不仅仅是身体。当跨越一个元素和另一个元素之间的边界时，有时候，dropzones有时会有轻微的可见闪烁，但看起来很好。

无论如何，现在我改变了lightdz ）和dimdz（），以便它们对所有非dropzones应用快速的jQuery fadeTo（）动画。这看起来真的很好，当它可以工作，并使它非常明显的用户他们可以做什么，不能丢弃的东西。麻烦的是，当它通过元素边界之间时，它将应用淡入淡出的动画。这比背景颜色的偶尔闪烁更加明显，特别是因为如果对象被非常快地拖动到多个边界上，它将排队动画，并使页面反复退色。

即使我并不打扰fadeTo（）动画，只是改变不透明度，它比背景颜色闪烁更加明显，因为整个页面都改变了，而不仅仅是dropzone元素。

有没有办法引用整个页面作为拖放和拖拽事件的单个元素？否则，是否有任何方法可以检测到在浏览器窗口之外发生的下降？如果我跳过拖拽事件，它看起来不错，但如果任何对象被拖动到浏览器窗口上，然后放在外面，整个页面将保持褪色。

解决方案

我真的很尴尬，这是多么容易。

  $（*：可见）.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是一个页面范围的容器。如果拖动事件将拖动的对象拖到浏览器窗口外面，则event.pageX的值为0.如果它发生在其他任何地方，它将具有非零值。

I'm making extensive use of the HTML5 native drag & drop, and it's almost entirely behaving itself, with one small exception.

I'm trying to highlight my dropzones when anything is dragged over the page. I originally tried to accomplish this by putting jQuery listeners on the document body, like this:

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

with lightdz() and dimdz() changing the background-color style property of all dropzones on the page to make them stand out. This didn't work. Whenever a dragged object entered a child element on the page (like a div container), the listener would flag this up as a dragleave event and dim the dropzones.

I got around this by applying the listener to all visible elements on the page, instead of just the body. There was occasionally a slight visible flickering on the dropzones when it crossed the boundary between one element and another, but it looked fine.

Anyway, now I've changed lightdz() and dimdz() so that they apply a quick jQuery fadeTo() animation to all non-dropzones. This looks awesome when it works, and makes it very apparent to the user what they can and can't drop things on. The trouble is that when it passes between element boundaries, it applies the fade animation. This is a lot more apparent than the occasional flicker of background-color, especially since if the object is dragged over multiple boundaries very quickly, it will queue the animations and have the page fade in and out repeatedly.

Even if I don't bother with the fadeTo() animation, and just change the opacity, it's a lot more visible than the background-color flicker, because the entire page changes rather than just the dropzone elements.

Is there any way to reference the entire page as a single element for purposes of dragover and dragleave events? Failing that, is there any way to detect a drop that takes place outside of the browser window? If I skip the dragleave event, it looks fine, but if any object is dragged over the browser window and then dropped outside it, the whole page stays faded.

解决方案

I'm genuinely embarrassed by how easy this one was.

$("*: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 is a page-wide container. If the dragleave event takes the dragged object outside of the browser window, event.pageX will have a value of 0. If it happens anywhere else, it'll have a non-zero value.

这篇关于HTML5拖放下降行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！