Astuce Javascript+html: Avoir un comportement normal sur le drop avec Firefox
mercredi 30 septembre 2020 à 14:38Note pour la prochaine fois que je voudrai faire un drag & drop de fichiers sur Firefox
Comme découvert grâce à ArthurHoaro, pour obliger le navigateur à gérer le drop de fichier sur une dropzone, il faut d'abord faire un preventDefault() sur les événements dragover et/ou dragenter.
solution N°1
On peut le faire en dur dans le HTML:
<div ondragover="return false">
<div ondragover="event.preventDefault()">
Ce qui peut même servir pour le ciblage du drop avec un sélecteur genre *[ondragover]
Solution N°2
On peut bien entendu également le définir directement dans le js:
document.getElementById("body").addEventListener("drop",function(e){
console.log(e);
e.preventDefault();
e.stopPropagation();
})
document.getElementById("body").addEventListener("dragover",function(e){
e.preventDefault();
e.stopPropagation();
})
document.getElementById("body").addEventListener("dragenter",function(e){
e.preventDefault();
e.stopPropagation();
})
Sources:
- https://stackoverflow.com/questions/8006715/drag-drop-files-into-standard-html-file-input
- https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets<link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});
► Commentaires