Question sur les evt drag and drop en javascript

Bonjour à tous
Je suis en train de me pencher sur le fonctionnement de drag & drop en Javascript et il y a une chose que je ne comprends pas.
Je suis dans le cas où je fais glisser des images depuis l'explorateur de fichier vers un div ciblé par la variable js dropArea
Apparemment, le comportement par défaut de dragenter et dragover est de "refuser d'accepter tous les éléments glissés", donc il faut gérer les événements .ondragenter et .ondragover et ajouter une commande return false (ou bien e.preventDefault(); si on passe le paramètre e pour l'événement) si l'on veut que le comportement par défaut du navigateur (à savoir afficher l'image et quitter la page web) ne soit pas déclenché..
Le fait de mettre e.preventDefault(); pour l'événement ondrop ne suffit pas , il faut aussi traiter .ondragenter et .ondragover.

Qui peut m'expliquer pourquoi??


Merci

	var dropArea = document.getElementById('zone-to-drop');

	// evt enter
	dropArea.ondragenter = function() {
		console.log('enter');
		return false;
	}
	// evt survol
	dropArea.ondragover = function() {
		console.log('over');
		return false;
	}
	
	// evt drop
	dropArea.ondrop = function(e) {
		e.preventDefault();
		doSomething(e.dataTransfer.files);
	}

Modifié par lionel_css3 (12 Jan 2018 - 09:46)

erreur
Modifié par lionel_css3 (12 Jan 2018 - 09:47)