dropEffect не работает при перетаскивании файлов в Firefox - PullRequest
Новая
       37

dropEffect не работает при перетаскивании файлов в Firefox

9 голосов
/ 16 февраля 2012

У меня есть веб-страница, которая позволяет перетаскивать файлы из-за пределов браузера и перетаскивать на цель на моей веб-странице.Мое приложение будет загружать копию каждого файла, поэтому я установил dataTransfer.dropEffect на «copy», чтобы браузер сообщал пользователю, что это приведет к копированию, а не к перемещению.Это работает, как и ожидалось, в Chrome: при перетаскивании файла поверх моей цели перетаскивания браузер отображает курсор «копирования».Но Firefox, похоже, игнорирует dropEffect и продолжает отображать курсор по умолчанию «move», пока файлы перетаскиваются поверх моей цели перетаскивания.Я много занимался поиском и не нашел упоминания о проблеме 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>

Ответы [ 2 ]

4 голосов
/ 30 июня 2015

Firefox показывает курсор «копирования», если пользователь удерживает клавишу Ctrl при перетаскивании по умолчанию.

Единственный способ обойти это - установить 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>
4 голосов
/ 20 августа 2012

Это больше похоже на ошибку в Mozilla, чем на другое.

Я пробовал пару тестов и всегда один и тот же результат.

Следите за ошибкой: dataTransfer.dropEffect

Удачи!

РЕДАКТИРОВАТЬ: Вот разработчик Mozilla.ссылка в DOCS: DataTransfer # dropEffect

Посмотрите на "mozCursor" part ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...