1) Quellprojekt erstellen
1.1) Der Wert des ziehbaren Attributs :
wahr — — Dieses Element kann gezogen werden;
false — Dieses Element kann nicht gezogen werden;
auto — Der Browser kann unabhängig entscheiden, ob ein Element kann gezogen werden;
1.2) Das Ereignis des gezogenen Elements:
Dragstart— – Wird ausgelöst, wenn das Element beginnt zu ziehen;
ziehen – Wird wiederholt ausgelöst, wenn das Element gezogen wird;
ziehen Ende – Wird ausgelöst wenn der Ziehvorgang abgeschlossen ist;
2) Freigabebereich erstellen
2.1) Freigabebereich-Ereignis:
Dragenter – wird ausgelöst, wenn das gezogene Element in den vom Freigabebereich eingenommenen Bildschirmbereich gelangt;
Dragover – wird ausgelöst, wenn das gezogene Element in den vom Freigabebereich eingenommenen Bildschirmbereich gelangt; Wird ausgelöst, wenn es innerhalb des Freigabebereichs verschoben wird.
Dragleave – wird ausgelöst, wenn das gezogene Element den Freigabebereich verlässt, ohne platziert zu werden wenn das gezogene Element im Freigabebereich abgelegt wird;
3) Verwenden Sie das DataTransfer-Objekt
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style> #src > * {float:left;} #src > img {border: thin solid black; padding: 2px; margin:4px;} #target {border: thin solid black; margin:4px;} #target { height: 81px; width: 81px; text-align: center; display: table;} #target > p {display: table-cell; vertical-align: middle;} img.dragged {background-color: lightgrey;} </style> </head> <body> <p id="src"> <img draggable="true" id="banana" src="banana100.png" alt="banana"/> <img draggable="true" id="apple" src="apple100.png" alt="apple"/> <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/> <p id="target"> <p id="msg">Drop Here</p> </p> </p> <script> var src = document.getElementById("src"); var target = document.getElementById("target"); var msg = document.getElementById("msg"); var draggedID; target.ondragenter = handleDrag; target.ondragover = handleDrag; function handleDrag(e) { e.preventDefault(); } target.ondrop = function(e) { var newElem = document.getElementById(draggedID).cloneNode(false); target.innerHTML = ""; target.appendChild(newElem); e.preventDefault(); } src.ondragstart = function(e) { draggedID = e.target.id; e.target.classList.add("dragged"); } src.ondragend = function(e) { var elems = document.querySelectorAll(".dragged"); for (var i = 0; i < elems.length; i++) { elems[i].classList.remove("dragged"); } } </script> </body> </html>
Zusätzliche Eigenschaften, die durch das DragEvent-Objekt definiert werden:
dataTransfer – Gibt das Objekt zurück, das zum Übertragen von Daten in den Freigabebereich verwendet wird (DataTransfer); 🎜 >
3.2)Durch das DataTransfer-Objekt definierte Eigenschaften:
Typen – das Format der zurückgegebenen Daten;
getData(
setData(
clearData(
Dateis – Gibt die Liste der gezogenen Dateien zurück
3.3) Dateien per Drag-and-Drop verschieben:
Durch das Dateiobjekt definierte Eigenschaften
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style> #src > * {float:left;} #src > img {border: thin solid black; padding: 2px; margin:4px;} #target {border: thin solid black; margin:4px;} #target { height: 81px; width: 81px; text-align: center; display: table;} #target > p {display: table-cell; vertical-align: middle;} img.dragged {background-color: lightgrey;} </style> </head> <body> <p id="src"> <img draggable="true" id="banana" src="banana100.png" alt="banana"/> <img draggable="true" id="apple" src="apple100.png" alt="apple"/> <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/> <p id="target"> <p id="msg">Drop Here</p> </p> </p> <script> var src = document.getElementById("src"); var target = document.getElementById("target"); target.ondragenter = handleDrag; target.ondragover = handleDrag; function handleDrag(e) { e.preventDefault(); } target.ondrop = function(e) { var droppedID = e.dataTransfer.getData("Text"); var newElem = document.getElementById(droppedID).cloneNode(false); target.innerHTML = ""; target.appendChild(newElem); e.preventDefault(); } src.ondragstart = function(e) { e.dataTransfer.setData("Text", e.target.id); e.target.classList.add("dragged"); } src.ondragend = function(e) { var elems = document.querySelectorAll(".dragged"); for (var i = 0; i < elems.length; i++) { elems[i].classList.remove("dragged"); } } </script> </body> </html>
Typ – Ruft den Dateityp ab, dargestellt durch MIME-Typ;
Größe – Ruft die Dateigröße ab (in Bytes);
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den Beispielcode für Drag & Drop in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!