将文件拖放到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

上一篇: dropEffect not working when dragging files to Firefox

下一篇: How do I remove a file from the FileList