HTML5-Drag-and-Drop-Vorgang HTML5 implementiert den Drag-and-Drop-Vorgang von Webseitenelementen. HTML5-Tutorial-Fähigkeiten

<script><br> function init(){<br> var info = document.getElementById("info");<br> //Das per Drag & Drop gezogene Element abrufen, in diesem Beispiel befindet sich das Fotoalbum ist DIV<br> var src = document.getElementById("album");<br> //Drag-and-Drop-Vorgang starten<br> src.ondragstart = function (e) {<br> //ID abrufen von das gezogene und abgelegte Foto <br> var dragImgId = e.target.id;<br> //Gezogenes Element abrufen<br> var dragImg = document.getElementById(dragImgId);<br> //Drag-and-Drop-Vorgang endet<br> dragImg.ondragend = function(e){<br> //Erinnerungsinformationen wiederherstellen<br> info.innerHTML="<h2>Warme Erinnerung: Sie können das Foto direkt in den Papierkorb ziehen</h2>"; <br> }; <br> e.dataTransfer.setData("text",dragImgId);<br> };<br> //Während des Drag-and-Drop-Vorgangs <br> src.ondrag = function(e){ <br> info.innerHTML=" <h2>--Das Foto wird gezogen--</h2>";<br> }<br> //Drag-and-Drop-Zielelement abrufen<br> var target = document. getElementById("trash"); <br> //Standardverarbeitung deaktivieren; <br> target.ondragover = function(e){<br> e.preventDefault();<br> }<br> target.ondragover = function (e){<br> e .preventDefault(); <br> }<br> //Etwas wird per Drag & Drop auf das Zielelement gezogen <br> target.ondrop = function (e) {<br> var draggedID = e .dataTransfer.getData("text"); <br> //Das DOM-Objekt im Album abrufen <br> var oldElem = document.getElementById(draggedID);<br> //Knoten des Fotos aus dem Album DIV entfernen <br> oldElem.parentNode.removeChild(oldElem); <br> //Den gezogenen Foto-DOM-Knoten zum Papierkorb hinzufügen DIV <br> target.appendChild(oldElem);<br> info.innerHTML="<h2&gt ;Warmer Tipp: Sie können das Foto direkt in den Papierkorb ziehen</h2>";<br> e.preventDefault();<br> }<br> }<br> </script>