Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS Drag n'drop & Data Transfer API : Démo HTML5

Mise à jour : 2017-01-22

Cette fonctionnalité faisait cruellement défaut et de nombreux moyens plus ou moins efficaces et compatibles tentaient d'y remédier (à base de tonnes de JavaScript).
Désormais une fonctionnalité native permet de réaliser ce type d'opération.


Les capteurs d'évènements

API Data Transfer

Notes sur le tuto


Exemple de code HTML5

Glissez/Lachez les navigateurs dans une zone :<br>
<div class="box" ondragover="return false" ondrop="drop(this, event)" id="box">
	<p>Navigateurs compatibles</p>
</div>
<div style="float:left"><br>
	<img src="../img/logos/chrome1.png"  id="cr" draggable="true"
		ondragstart="drag(this, event)"><br>
	<img src="../img/logos/firefox1.png" id="ff" draggable="true"
		ondragstart="drag(this, event)"><br>
	<img src="../img/logos/ie1.png"      id="ie"
		ondragstart="drag(this, event)"><br>
	<img src="../img/logos/safari1.png"  id="sf"
		ondragstart="drag(this, event)">
</div>
<div class="box" ondragover="return false" ondrop="drop(this, event)">
	<p>Navigateurs incompatibles</p>
</div>
<div style="clear:both"></div>
<script>
	function drag(target, event) {
		event.dataTransfer.setData("text", target.id);
	}
	function drop(target, event) {
		navId = event.dataTransfer.getData("text");
		target.appendChild(document.getElementById(navId));
		event.preventDefault();
	}
</script>

Démonstration du résultat HTML5


Glissez/Lachez les navigateurs dans une zone :

Navigateurs compatibles





Navigateurs incompatibles


Détection automatique du support HTML5

Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)
<script src="_html5detect.js"></script>
<script>
	isAttributeSpecified("cr", "draggable")
	isAttributeSpecified("cr", "ondragstart")
	isAttributeSpecified("box","ondragover")
	isAttributeSpecified("box","ondrop")
</script>		

Can I Use dragndrop? Data on support for the dragndrop feature across the major browsers from caniuse.com.