dropEffect не работает при перетаскивании файлов в Firefox
У меня есть веб-страница, которая позволяет перетаскивать файлы из-за пределов браузера и перетаскивать их на целевой объект на моей веб-странице. Мое приложение будет загружать копию каждого файла, поэтому я установил для 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>