更改鼠标光标HTML5拖放文件（GMail拖放） [英] Changing Mouse Cursor for HTML5 Drag Drop Files (GMail Drag Drop)
问题描述
我正在尝试重现GMail处理html5拖放附件的方式 - 当您拖动文件通过页面时，它会显示一个新的元素，以便将它们放在其上。我得到了那个部分（这不是我以为会这么简单）。
I'm trying to reproduce the way GMail handles html5 drag/drop attachments -- where as soon as you drag files over the page, it displays a new element for you to drop them on. I got that part worked out (it wasn't as straight forward as I thought it would be).
现在我想通过改变鼠标来抛光它鼠标悬停在任何其他元素以外的光标，而不是drop元素，所以不允许用户放弃。我想我可以用自定义游标来做，但这似乎不是GMail正在做的。 规格将表明可以更改鼠标光标，但是我似乎无法让它正常工作，使用dropzone / effectAllowed。
Now I'm trying to polish it up by changing the mouse cursor when the mouse is over any other element other than the drop element, to tell the user dropping isn't allowed here. I imagine I can do it with a custom cursor, but that does not appear to be what GMail is doing. The spec would suggest it's possible to change the mouse cursor as well, but I can't seem to get it working right, using dropzone/effectAllowed.
任何帮助将不胜感激，这是我当前的设置： http：// jsfiddle。 net / guYWx / 1 /
Any help would be appreciated, here's my current setup: http://jsfiddle.net/guYWx/1/
ETA：以下是我最终的结论： http://jsfiddle.net/guYWx/16/
ETA: Here's what I ended up with: http://jsfiddle.net/guYWx/16/
<body style="border: 1px solid black;">
<div id="d0" style="border: 1px solid black;">drag files onto this page</div>
<div id="d1" style="border: 1px solid black; display: none; background-color: red;">-> drop here <-</div>
<div id="d2" style="border: 1px solid black;">and stuff will happen</div>
<div style="float: left;">mouse them all over </div>
<div style="float: left;">these elements</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div>end page</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var resetTimer;
var reset = function()
{
$('#d1').hide();
};
var f = function(e)
{
var srcElement = e.srcElement? e.srcElement : e.target;
if ($.inArray('Files', e.dataTransfer.types) > -1)
{
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = (srcElement.id == 'd1') ? 'copy' : 'none';
if (e.type == "dragover")
{
if (resetTimer)
{
clearTimeout(resetTimer);
}
$('#d1').show();
console.info('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.types is ' + e.dataTransfer.types + '\n\ne.dataTransfer.files.length is ' + e.dataTransfer.files.length);
}
else if (e.type == "dragleave")
{
resetTimer = window.setTimeout(reset, 25);
}
else if (e.type == "drop")
{
reset();
alert('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0));
}
}
};
document.body.addEventListener("dragleave", f, false);
document.body.addEventListener("dragover", f, false);
document.body.addEventListener("drop", f, false);
</script>
推荐答案
有一些挖掘源码，发现你'应该在你的 dragover 事件处理程序内设置 event.dataTransfer.dropEffect ='move'; Goolled for dropEffect可以阅读更多内容，并发现：
Did some digging through the source and found that you're supposed to set event.dataTransfer.dropEffect = 'move'; inside your dragover event handler. Googled for dropEffect to read more and found:
dataTransfer.dropEffect
控制用户在dragenter和
dragover事件期间给出的反馈。当用户将鼠标悬停在目标元素上时，
浏览器的光标将指示要执行哪种类型的操作
（例如副本，移动等）。这个效果可以取决于
以下值之一：none，copy，link，move。
Controls the feedback that the user is given during the dragenter and dragover events. When the user hovers over a target element, the browser's cursor will indicate what type of operation is going to take place (e.g. a copy, a move, etc.). The effect can take on one of the following values: none, copy, link, move.
from： http://www.html5rocks.com/en/tutorials/dnd/basics/
编辑：这是我最后得到的结果： http： //jsfiddle.net/guYWx/16/
Here's what I ended up with: http://jsfiddle.net/guYWx/16/
必须做一个额外的技巧才能使其正常工作。这样做，当您选择文本并拖动页面时，滴管将不会出现：
Had to do one additional trick to get it working perfectly. Did this so the dropper wouldn't appear when you select text and drag it around the page:
if ($.inArray('Files', e.dataTransfer.types) > -1)
这篇关于更改鼠标光标HTML5拖放文件（GMail拖放）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
