Utiliser la fonction ondrop

<style>
#div2 {
float: left;
width: 200px;
height: 100px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<p>Déplacer l’élément du rectangle gauche au rectangle droite et vice-versa :</p>
<p id= »demo47″></p>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData(« text », ev.target.id);
document.getElementById(« demo47 »).innerHTML = « Début du déplacement de l’élément »;
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData(« text »);
ev.target.appendChild(document.getElementById(data));
document.getElementById(« demo47 »).innerHTML = « L’élément a été déplacé »;
}
</script>
<div id= »div2″ ondrop= »drop(event) » ondragover= »allowDrop(event) »>
<p id= »drag2″ draggable= »true » ondragstart= »drag(event) »>Bienvenue aux ateliers inversés !</p>
</div>

<div id= »div2″ ondrop= »drop(event) » ondragover= »allowDrop(event) »></div>

<p style= »clear:both; »>Note: drag events n’est pas supporté par Internet Explorer 8 ou Safari 5.1</p>