Funkcja dropEffect nie działa podczas przeciągania plików do przeglądarki Firefox

Mam stronę internetową, która umożliwia przeciąganie plików spoza przeglądarki i umieszczanie ich na stronie docelowej. Moja aplikacja prześle kopię każdego pliku, więc ustawię dataTransfer.dropEffect na "kopiowanie", aby przeglądarka wskazywała użytkownikowi, że spowoduje to skopiowanie, a nie przeniesienie. Działa to zgodnie z oczekiwaniami w Chrome: podczas przeciągania pliku ponad moim celem upuszczenia przeglądarka wyświetla kursor "kopiuj". Jednak Firefox zdaje się ignorować efekt dropEffect i wyświetla domyślny kursor "move", podczas gdy pliki są przeciągane na mój cel upuszczania. Zrobiłem dużo wyszukiwania i nie znalazłem żadnej wzmianki o takim problemie Firefoksa, więc prawdopodobnie przeoczę trochę szczegółów w moim kodzie. Załączam uproszczony przykład, który ilustruje problem poniżej. Z góry dziękuję, jeśli ktoś zauważy, co robię źle.Funkcja dropEffect nie działa podczas przeciągania plików do przeglądarki 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>

Źródło

2012-02-16 BradVoy

Mam ten sam problem. Moje obserwacje mówią, że Chrome i Safari w systemie Windows respektują dropEffect, ale Firefox 13, Opera 11.64 i Internet Explorer 9 i 10 tego nie robią. :( – thomthom

Wygląda raczej jak błąd z Mozilli, niż coś innego.

Próbowałem kilka testów i zawsze taki sam wynik.

Miej oko tutaj do śledzenia błędów: dataTransfer.dropEffect

powodzenia!

EDYCJA: Oto programista Mozilli. ogniwo w DOCS: DataTransfer#dropEffect

Spójrz na „mozCursor” części ...

Źródło

2012-08-20 06:37:18 gmo

mozCursor to krok we właściwym kierunku, ale szkoda, że Firefox nie działa tak, jak inne przeglądarki. – BradVoy

Firefox pokazuje „kopia” kursora, jeśli użytkownik posiada klawisz Ctrl podczas przeciągania domyślnie.

Jedynym sposobem obejścia tego problemu jest ustawienie parametru dataTransfer.effectAllowed na drażetkach oraz dataTransfer.dropEffect w celu "skopiowania".

Przykład:

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

Źródło

2015-06-30 08:05:19

Funkcja dropEffect nie działa podczas przeciągania plików do przeglądarki Firefox

Odpowiedz

Powiązane problemy