Question

我有一个网页，允许从浏览器外部拖动文件并将其放到我的网页上的目标上。我的应用程序将上传每个文件的副本，因此我将dataTransfer.dropEffect设置为＆＃34; copy＆＃34;所以浏览器会向用户表明这将导致复制而不是移动。这在Chrome中正常运行：在我的放置目标上拖动文件时，浏览器会显示＆＃34; copy＆＃34;光标。但Firefox似乎忽略了dropEffect并继续显示其默认＆＃34;移动＆＃34;文件被拖放到我的放置目标上时的光标。我已经做了很多搜索，并且没有发现像这样的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>

Answer 1

它看起来更像是一个mozilla bug而不是其他东西。

我尝试了几次测试，结果总是一样。

密切留意这个BUG：dataTransfer.dropEffect

祝你好运！

编辑：这是mozilla dev。 DOCS中的链接：DataTransfer#dropEffect

看一下“mozCursor”部分......

Answer 2

如果用户在默认拖动时按住Ctrl键，则Firefox会显示“复制”光标。

解决这个问题的唯一方法是在数据库中设置dataTransfer.effectAllowed以及将dataTransfer.dropEffect设置为“copy”。

示例：

<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>

将文件拖到Firefox时dropEffect不起作用

2 个答案: