javascript拖放与部分preventDefault [英] javascript drag and drop with partial preventDefault
问题描述
Gmail以几种巧妙的方式处理其拖放文件附件上传：
Gmail handles its drag-and-drop file attachment uploading in a few clever ways:
1）将文件拖动到浏览器中会导致出现dropzone。光标会显示反馈信息，指示您是否处于dropzone（在Windows中，如果在dropzone之外，则使用红色交叉循环）。如果你放在窗口内，但在dropzone之外，则会拦截该下降点，以防止浏览器的默认行为（通常导航到显示拖放的文件）。
1) Dragging a file into the browser causes the dropzone to appear. The cursor displays feedback indicating whether you are in the dropzone or not (in windows, a red crossthrough circle is used if outside the dropzone). If you drop inside the window but outside of the dropzone, the drop is intercepted such that the browser's default behavior is prevented (usually navigating away to display the dragged file).
最明显的尝试方式是在BODY上设置拖放处理程序，使dropzone出现，并且会禁用Default，但是光标如何更改？有没有办法使用dataTransfer.effectAllowed ='none'？
The most obvious way to attempt this is to set dragover handler on the BODY to make the dropzone appear and preventDefault, but what about the cursor change? Is there some way to use dataTransfer.effectAllowed='none'?
2）将文本从窗口的一部分拖到另一个部分不会触发拖拽，删除处理（即，dropzone不出现） - ＃1中提到的preventDefault不会启动。
2) Dragging text from one part of the window into another part does not trigger the drag-and-drop handling (ie- the dropzone does not appear)--and the preventDefault mentioned in #1 does not kick in.
如果我捕获BODY上的拖动事件从＃1），则防止窗口内文本拖动。他们如何同时完成这两个？看起来这比起初可能会更复杂。
If I capture the dragover event on the BODY (from #1), then intra-window text dragging is prevented. How do they accomplish both of these at the same time? It seems like this is more complex than it at first might appear.
更新：
我学到了两个相关在尝试完全解决这个问题的时候：
I learned two related things while trying to completely address this:
1）似乎IE甚至不会触发drop事件处理程序，如果dropEffect ='none'...所以我决定如果e.dataTransfer.types存在（它在Chrome和FF中，而不是在IE中），则仅将其设置为none。缺点是光标没有红色交叉，但至少我可以拦截掉以防止导航。如果e.dataTransfer.getData（'Text'）== null，你最好猜测IE是否是文件丢失。 （在我的情况下，我想能够收到 文件或文本的滴，所以这是我可以告诉我们的区别。）
1) It appears that IE will not even trigger the drop event handler if dropEffect='none'... so I decided to only set it to none if e.dataTransfer.types exists (which it does in Chrome & FF, but not in IE). The downside is that the cursor doesn't have the red crossthrough, but at least I can intercept the drop to prevent a navaway. Your best guess for determining whether it was a file drop in IE is if e.dataTransfer.getData('Text')==null. (In my case, I wanted to be able to receive drops of either files or text, so this is how I can tell the difference in IE.)
2）离开浏览器时，Gmail隐藏了dropzone是不明显的。如果您在页面上使用纯粹的拖拽事件，那么拖动到任何一个小孩将触发拖曳处理程序，即使您没有真正离开页面。然后我注意到，在dropzone消失之前Gmail中有延迟，所以我猜想他们会使用一个计时器来隐藏dropzone（在某种情况下会被重置）。但是我已经提出了一个似乎可以工作的备用解决方案：
2) It was non-obvious how Gmail hides the dropzone when you leave the browser. If you use a pure dragleave event on the page, then dragging into any child will trigger the dragleave handler even though you didn't really leave the page. I then noticed that there's a delay in Gmail before the dropzone disappears, so I would guess they use a timer to hide the dropzone (which gets reset on something like dragover). But I've come up with an alternate solution that appears to work so far:
function areXYInside(e){
var w=e.target.offsetWidth;
var h=e.target.offsetHeight;
var x=e.offsetX;
var y=e.offsetY;
return !(x<0 || x>=w || y<0 || y>=h);
}
然后：
$("#page").bind('dragleave', function(e){
if(this!=e.target) return false;
if(!areXYInside(e)){
hideBox();
}
return false;
});
推荐答案
我相信他们正在设置 dataTransfer.effect允许拖动，具体取决于 dataTransfer.types 属性。
I believe they are setting dataTransfer.effectAllowedon dragover, depending on the dataTransfer.types attribute.
编辑：我错了第一次，这里是类型的实际值（至少在Chrome中）：
- 拖动文本 [text / html，text，text / plain]
- 拖动文件 [Files]
I was wrong the first time, here are the actual values for types(in Chrome at least):
- dragging text ["text/html","text","text/plain"]
- dragging a file ["Files"]
这是一个简短的<一个href =http://jsfiddle.net/danmana/4VSFc/ =nofollow> jsFiddle示例玩。
编辑：我设法在Chrome和FF上实现确切的行为（见这里）
这篇关于javascript拖放与部分preventDefault的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
