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

发布于 2025-01-06 11:00:55 字数 1159 浏览 1 评论 0原文

我有一个网页，允许从浏览器外部拖动文件并将其拖放到网页上的目标上。我的应用程序将上传每个文件的副本，因此我将 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>

原文

I have a web page that allows files to be dragged from outside the browser and dropped onto a target on my web page. My application will be uploading a copy of each file, so I set dataTransfer.dropEffect to "copy" so the browser will indicate to the user that this will result in a copy rather than a move. This is working as expected in Chrome: when dragging a file over my drop target the browser displays a "copy" cursor. But Firefox seems to ignore the dropEffect and continues to display its default "move" cursor while the files are being dragged over my drop target. I've done a lot of searching and haven't found any mention of a Firefox problem like this, so I'm probably overlooking some detail in my code. I've included a stripped-down example that illustrates the problem below. Thanks in advance if anyone can spot what I'm doing wrong.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

那一片橙海， 2025-01-13 11:00:55

默认情况下，如果用户在拖动时按住 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>

Firefox shows the "copy" cursor if the user holds the Ctrl key while dragging by default.

The only way around this is to set the dataTransfer.effectAllowed on the dragee as well as the dataTransfer.dropEffect to "copy".

Example:

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

回复收藏 0 原文