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

【问题标题】：dropEffect not working when dragging files to Firefox将文件拖到 Firefox 时 dropEffect 不起作用
【发布时间】：2012-02-16 16:03:00
【问题描述】：

我有一个网页，它允许将文件从浏览器外部拖放到我网页上的目标上。我的应用程序将上传每个文件的副本，因此我将 dataTransfer.dropEffect 设置为“复制”，以便浏览器向用户指示这将导致复制而不是移动。这在 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>

【问题讨论】：

我遇到了同样的问题。我的观察是 Windows 上的 Chrome 和 Safari 尊重 dropEffect，但 Firefox 13、Opera 11.64 和 Internet Explorer 9 和 10 没有。 :(

标签： javascript html firefox drag-and-drop

【解决方案1】：

它看起来更像是一个 Mozilla 错误，而不是其他东西。

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

关注这里追踪BUG：dataTransfer.dropEffect

祝你好运！

编辑：这是 Mozilla 开发者。 DOCS 中的链接：DataTransfer#dropEffect

看看 "mozCursor" 部分...

【讨论】：

mozCursor 是朝着正确方向迈出的一步，但可惜 Firefox 不能像其他浏览器一样工作。

【解决方案2】：

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

解决这个问题的唯一方法是在糖衣丸上设置 dataTransfer.effectAllowed 以及将 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>

【讨论】：