将文件拖放到Firefox时,dropEffect不起作用
我有一个网页,允许从浏览器外部拖动文件并将其放到网页上的目标上。 我的应用程序将上传每个文件的副本,因此我将dataTransfer.dropEffect设置为“复制”,以便浏览器向用户指示这将导致复制而不是移动。 Chrome在Chrome浏览器中按预期工作:在通过放置目标拖动文件时,浏览器会显示“复制”光标。 但是Firefox似乎忽略了dropEffect,并且在文件被拖到我的放置目标上时继续显示其默认的“移动”光标。 我做了很多搜索,并没有发现任何提及这样的Firefox问题,所以我可能忽略了我的代码中的一些细节。 我已经包含了一个精简的例子来说明下面的问题。 如果有人能够发现我做错了什么,请提前致谢。
<!DOCTYPE html>
<html>
<head>
<title>Test Stuff</title>
<style type="text/css">
P
{
background-color: #cccccc;
padding: 10px;
}
</style>
<script type="text/javascript">
function DocOnLoad() {
var target = document.getElementById('dropTarget');
target.addEventListener('dragenter', function (e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
target.addEventListener('dragover', function (e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
target.addEventListener('drop', function (e) {
e.preventDefault();
var files = e.dataTransfer.files;
alert(files[0].name);
});
}
</script>
</head>
<body onLoad="DocOnLoad()" >
<p id="dropTarget">Drop target.</p>
</body>
</html>
这看起来更像是一个mozilla的bug,而不是其他的东西。
我尝试了几次测试,总是得到相同的结果。
请留意这里跟踪BUG:dataTransfer.dropEffect
祝你好运!
编辑:这是mozilla开发。 链接在DOCS:DataTransfer#dropEffect
看看“mozCursor”部分...
如果用户在默认情况下拖动时按住Ctrl键,Firefox将显示“复制”光标。
唯一的解决方法是设置dataTransfer.effectAllowed在dragee以及dataTransfer.dropEffect以“复制”。
例:
<html>
<head>
<style>
#div1 { width:300px;height:70px;padding:10px;border:1px solid black; }
</style>
<script>
function dragOver(e) {
e.dataTransfer.dropEffect = "copy";
e.preventDefault();
}
function dragStart(e) {
e.dataTransfer.effectAllowed = "copy";
e.dataTransfer.setData("text", e.target.id);
}
</script>
</head>
<body>
<div id="div1" ondragover="dragOver(event)"></div>
<br>
<h1 id="drag1" draggable="true" ondragstart="dragStart(event)">DRAG ME</h1>
</body>
</html>
链接地址: http://www.djcxy.com/p/64269.html