Opération glisser-déposer HTML5 HTML5 implémente l'opération glisser-déposer des pages Web elements_html5 compétences du didacticiel

<script><br> function init(){<br> var info = document.getElementById("info");<br> //Récupère l'élément glissé-déposé, cet exemple est l'endroit où le l'album photo est DIV<br> var src = document.getElementById("album");<br> //Démarrer l'opération glisser-déposer<br> src.ondragstart = function (e) {<br> //Obtenir l'ID de la photo glissée et déposée <br> var dragImgId = e.target.id;<br> //Récupère l'élément glissé<br> var dragImg = document.getElementById(dragImgId);<br> //L'opération de glisser-déposer se termine<br> dragImg.ondragend = function(e){<br> //Restaurer les informations de rappel<br> info.innerHTML="<h2>Rappel chaleureux : vous pouvez faire glisser la photo directement vers la poubelle</h2>"; <br> }; <br> e.dataTransfer.setData("text",dragImgId);<br> };<br> //Pendant le processus de glisser-déposer <br> src.ondrag = function(e){ <br> info.innerHTML=" <h2>--La photo est en cours de déplacement--</h2>";<br> }<br> //Obtenir l'élément cible glisser-déposer<br> var target = document. getElementById("trash"); <br> //Désactiver le traitement par défaut ; <br> target.ondragover = function(e){<br> e.preventDefault();<br> }<br> target.ondragover = function (e){<br> e .preventDefault(); <br> }<br> //Quelque chose est glissé et déposé sur l'élément cible <br> target.ondrop = function (e) {<br> var draggedID = e .dataTransfer.getData("text"); <br> //Récupérer l'objet DOM dans l'album <br> var oldElem = document.getElementById(draggedID);<br> //Supprimer le nœud de la photo de l'album DIV <br> oldElem.parentNode.removeChild(oldElem); <br> //Ajouter le nœud DOM de la photo déplacée à la poubelle DIV; <br> target.appendChild(oldElem);<br> info.innerHTML="<h2&gt ;Conseil : vous pouvez faire glisser la photo directement vers la corbeille</h2>";<br> e.preventDefault();<br> }<br> }<br> </script>