Bra*_*Voy 9 javascript firefox html5 drag-and-drop
我有一个网页,允许从浏览器外部拖动文件并将其放到我的网页上的目标上.我的应用程序将上传每个文件的副本,因此我将dataTransfer.dropEffect设置为"copy",以便浏览器向用户指示这将导致副本而不是移动.这在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>
小智 6
默认情况下，如果用户在拖动时按住 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>它看起来更像是一个 mozilla bug，而不是其他东西。
我尝试了几次测试，结果总是相同。
关注这里追踪BUG：dataTransfer.dropEffect
祝你好运！
编辑：这是 mozilla 开发人员。DOCS 中的链接：DataTransfer#dropEffect
看一下“mozCursor”部分......
| 归档时间： |
|
| 查看次数： |
2790 次 |
| 最近记录： |