gpt4 book ai didi

html - 更改 HTML5 拖放文件的鼠标光标(GMail 拖放)

转载 作者:技术小花猫 更新时间:2023-10-29 12:18:18 24 4
gpt4 key购买 nike

我正在尝试重现 GMail 处理 html5 拖放附件的方式——只要您将文件拖到页面上,它就会显示一个新元素供您放置。我解决了那部分问题(它并不像我想象的那么简单)。

现在,当鼠标悬停在 drop 元素以外的任何其他元素上时,我试图通过更改鼠标光标来完善它,以告诉用户此处不允许放下。我想我可以使用自定义光标来完成它,但这似乎不是 GMail 正在做的事情。 The spec建议也可以更改鼠标光标,但我似乎无法使用 dropzone/effectAllowed 使其正常工作。

任何帮助将不胜感激,这是我当前的设置:http://jsfiddle.net/guYWx/1/

预计到达时间:这是我最终得到的: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;">-&gt; drop here &lt;-</div>
<div id="d2" style="border: 1px solid black;">and stuff will happen</div>
<div style="float: left;">mouse them all over&nbsp;</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';。 Google 搜索 dropEffect 以阅读更多内容并发现:

dataTransfer.dropEffect

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/

必须采取额外的技巧才能使其完美运行。这样做是为了在您选择文本并将其拖到页面周围时滴管不会出现:

if ($.inArray('Files', e.dataTransfer.types) > -1)

关于html - 更改 HTML5 拖放文件的鼠标光标(GMail 拖放),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8459838/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com