dropEffect not working when dragging files to Firefox
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>
It's look more like a mozilla bug rather than other thing.
I tried a couple of tests and always the same result.
Keep an eye here to track the BUG: dataTransfer.dropEffect
Good Luck!
EDIT: Here's the mozilla dev. link in DOCS: DataTransfer#dropEffect
Take a look to the "mozCursor" part...
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>