問題描述
我正在嘗試重現(xiàn) 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).
現(xiàn)在我試圖通過在鼠標懸停在除 drop 元素之外的任何其他元素上時更改鼠標光標來完善它，以告訴用戶此處不允許放置.我想我可以使用自定義光標來完成，但這似乎不是 GMail 正在做的事情.規(guī)范 建議也可以更改鼠標光標，但我使用 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.
任何幫助將不勝感激，這是我當前的設(shè)置:http://jsfiddle.net/guYWx/1/
Any help would be appreciated, here's my current setup: http://jsfiddle.net/guYWx/1/
ETA:這是我最終得到的結(jié)果: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 + '">
e.dataTransfer.types is ' + e.dataTransfer.types + '
e.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 + '">
e.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>
推薦答案
查了一下源碼，發(fā)現(xiàn)你應該在里面設(shè)置 event.dataTransfer.dropEffect = 'move';您的 dragover 事件處理程序.谷歌搜索 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
控制在拖動過程中給用戶的反饋和拖拽事件.當用戶將鼠標懸停在目標元素上時，瀏覽器的光標將指示要執(zhí)行的操作類型地點(例如副本、移動等).效果可以采取其中一種以下值:無、復制、鏈接、移動.
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.
來自:http://www.html5rocks.com/en/tutorials/dnd/基礎(chǔ)知識/
這是我最終得到的結(jié)果:http://jsfiddle.net/guYWx/16/
Here's what I ended up with: http://jsfiddle.net/guYWx/16/
必須做一個額外的技巧才能讓它完美地工作.這樣做是為了在您選擇文本并將其拖到頁面周圍時不會出現(xiàn)滴管:
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)
這篇關(guān)于更改 HTML5 拖放文件的鼠標光標(GMail 拖放)的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！