Heim > Artikel > Web-Frontend > HTML5-Anleitung (3) – Drag-and-Drop-Funktion implementieren
HTML5-Anleitung (3) – Drag-and-Drop-Funktion implementieren
- 黄舟Original
- 2017-03-22 16:05:521580Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Implementierung der Drag-and-Drop-Funktion für HTML-Elemente in HTML5. Vor HTML5 musste man zum Implementieren von Drag & Drop js verwenden. Jetzt unterstützt HTML5 die Drag & Drop-Funktion intern, aber um etwas komplexere Funktionen zu implementieren, ist die Hilfe von js immer noch unverzichtbar. Schauen wir uns unten einige Beispiele an.
1. Erstellen Sie ein Drag-Objekt
Über das Draggable-Attribut können wir dem Browser mitteilen, welche Elemente per Drag & Drop verschoben werden müssen. Draggable hat drei Werte: true: Das Element kann gezogen werden; false: Das Element kann nicht gezogen werden; auto: Der Browser bestimmt, ob das Element gezogen werden kann.
Der Systemstandardwert ist auto, aber im automatischen Fall unterstützen Browser die Drag-and-Drop-Funktion verschiedener Elemente unterschiedlich. Beispielsweise wird das img-Objekt unterstützt, das p-Objekt jedoch nicht. Wenn Sie ein Element ziehen müssen, ist es daher am besten, Draggale auf „True“ zu setzen. Schauen wir uns unten ein Beispiel an:
<!DOCTYPE HTML><html><head>
<title>Example</title>
<style>
#src > * {
float: left;
}
#target, #src > img {
border: thin solid black;
padding: 2px;
margin: 4px;
}
#target {
height: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
#target > img {
margin: 1px;
}
</style></head><body>
<p id="src">
<img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
<img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
<img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
<p id="target">
<p id="msg">
drop here</p>
</p>
</p>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
</script>
</body>
</html>Laufeffekt:
2. Verarbeitungswiderstand Ereignisse
Lassen Sie uns nun etwas über Drag-bezogene Ereignisse lernen. Es gibt zwei Arten von Ereignissen: das Ereignis des Drag-Objekts und das Ereignis des Drop-Bereichs. Zu den Drag-Ereignissen gehören: Dragstart: Wird ausgelöst, wenn das Ziehen des Elements beginnt. Drag: Wird während des Ziehens des Elements ausgelöst. Dragend: Wird ausgelöst, wenn das Ziehen des Elements endet. Schauen wir uns unten ein Beispiel an:
<!DOCTYPE HTML><html><head>
<title>Example</title>
<style>
#src > * {
float: left;
}
#target, #src > img {
border: thin solid black;
padding: 2px;
margin: 4px;
}
#target {
height: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
#target > img {
margin: 1px;
}
img.dragged {
background-color: Orange;
}
</style></head><body>
<p id="src">
<img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
<img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
<img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
<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");
src.ondragstart = function (e) {
e.target.classList.add("dragged");
}
src.ondragend = function (e) {
e.target.classList.remove("dragged");
msg.innerHTML = "drop here";
}
src.ondrag = function (e) {
msg.innerHTML = e.target.id;
} </script></body></html>Betriebseffekt:
3. Erstellen Sie einen Lieferbereich
Schauen wir uns die Ereignisse im Zusammenhang mit dem Drop-Bereich an: Dragenter: Wird ausgelöst, wenn das Drag-Objekt in den Drop-Bereich gelangt. Dragover: Wird ausgelöst, wenn sich das Drag-Objekt innerhalb des Drop-Bereichs bewegt , verlässt aber den Drop-Bereich. Ausgelöst, wenn; Drop: Wird ausgelöst, wenn das gezogene Objekt im Drop-Bereich abgelegt wird.
Schauen wir uns ein Beispiel an:
<!DOCTYPE HTML><html><head>
<title>Example</title>
<style>
#src > * {
float: left;
}
#target, #src > img {
border: thin solid black;
padding: 2px;
margin: 4px;
}
#target {
height: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
#target > img {
margin: 1px;
}
img.dragged {
background-color: lightgrey;
}
</style></head><body>
<p id="src">
<img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
<img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
<img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
<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>Laufergebnisse:
4. DataTransfer verwenden
Wir verwenden DataTransfer, um Daten vom Drag-Objekt in den Drop-Bereich zu übertragen. DataTransfer verfügt über die folgenden Eigenschaften und Methoden: Typen: gibt das Format der Daten zurück; getData(0313a12b65aa20a048ec62b8cf470fd2): gibt die Daten im angegebenen Format zurück setData(0313a12b65aa20a048ec62b8cf470fd2, 1d029f6197b5a3eb8a3fdf0a088ddf55): legt die Daten fest das angegebene Format; clearData(db67a7d68f7dcf3e1cbb6c58d46c7cd0): entfernt die angegebenen Formatdateien: gibt ein Array von Dateien zurück, die geliefert wurden.
Schauen wir uns das folgende Beispiel an, das den gleichen Effekt wie Beispiel 3 erzielt:
9a78f9382cfffc6c56b2ff1d7da5de14100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7Example6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
#src > * {
float: left;
}
#src > img {
border: thin solid black;
padding: 2px;
margin: 4px;
}
#target {
border: thin solid black;
margin: 4px;
}
#target {
height: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
img.dragged {
background-color: Orange;
}
531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d
d643afa7f44205fa36f73ddcbd859a1f
4ebcc5acaaef9a420126fa5287284026
c0bdd28485ad805bfb7e05724c72c844
e07cff6edccd0ece2caea16e427bd7cd
b542d434cdaa3cd747109219a835c8f5
42e673d36f66c5d00fecbb811523d281
drop here94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3
3f1c4e4b6b16bbbd69b2ee476dc4f83a
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 2cdd3b3430fe4db382eef792693250d536cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
5. Dateien per Drag & Drop
HTML5 Mit der Unterstützung der Datei-API können wir lokale Dateien betreiben. Im Allgemeinen verwenden wir die Datei-API nicht direkt. Wir können sie in Kombination mit anderen Funktionen wie Drag-and-Drop-Effekten verwenden, wie im folgenden Beispiel:
<!DOCTYPE HTML><html><head>
<title>Example</title>
<style>
body > * {
float: left;
}
#target {
border: medium double black;
margin: 4px;
height: 75px;
width: 200px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
table {
margin: 4px;
border-collapse: collapse;
}
th, td {
padding: 4px;
}
</style></head><body>
<p id="target">
<p id="msg">
Drop Files Here</p>
</p>
<table id="data" border="1">
</table>
<script>
var target = document.getElementById("target");
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function (e) {
var files = e.dataTransfer.files;
var tableElem = document.getElementById("data");
tableElem.innerHTML = "<tr><th>Name</th><th>Type</th><th>Size</th></tr>";
for (var i = 0; i < files.length; i++) {
var row = "<tr><td>" + files[i].name + "</td>
<td>" + files[i].type + "</td>
<td>" + files[i].size + "</td></tr>";
tableElem.innerHTML += row;
}
e.preventDefault();
} </script></body></html>DataTransfer gibt ein FileList-Objekt zurück kann es als Datei-Array-Objekt behandeln. Datei enthält die folgenden Attribute: Name: Dateiname: Dateityp (MIME-Typ): Dateigröße.
Laufeffekt:
6. Dateien hochladen
Hier ist ein Beispiel für das Hochladen von Dateien durch Ziehen von Ajax.
<!DOCTYPE HTML><html><head>
<title>Example</title>
<style>
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
}
.label {
text-align: right;
}
#target {
border: medium double black;
margin: 4px;
height: 50px;
width: 200px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
</style></head><body>
<form id="fruitform" method="post" action="/UploadHandler.ashx">
<p class="table">
<p class="row">
<p class="cell label">
Bananas:</p>
<p class="cell">
<input name="bananas" value="2" /></p>
</p>
<p class="row">
<p class="cell label">
Apples:</p>
<p class="cell">
<input name="apples" value="5" /></p>
</p>
<p class="row">
<p class="cell label">
Cherries:</p>
<p class="cell">
<input name="cherries" value="20" /></p>
</p>
<p class="row">
<p class="cell label">
File:</p>
<p class="cell">
<input type="file" name="file" /></p>
</p>
<p class="row">
<p class="cell label">
Total:</p>
<p id="results" class="cell">
0 items</p>
</p>
</p>
<p id="target">
<p id="msg">
Drop Files Here</p>
</p>
<button id="submit" type="submit">
Submit Form</button>
</form>
<script type="text/javascript">
var target = document.getElementById("target");
var httpRequest;
var fileList;
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function (e) {
fileList = e.dataTransfer.files;
e.preventDefault();
}
document.getElementById("submit").onclick = function handleButtonPress(e) {
e.preventDefault();
var form = document.getElementById("fruitform");
var formData = new FormData(form);
if (fileList) {
for (var i = 0; i < fileList.length; i++) {
formData.append("file" + i, fileList[i]);
}
}
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = handleResponse;
httpRequest.open("POST", form.action);
httpRequest.send(formData);
} function handleResponse() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var data = JSON.parse(httpRequest.responseText);
document.getElementById("results").innerHTML = "You ordered " + data.total + " items";
}
}
</script>
</body>
</html>Effekt:
Einige der oben genannten Beispiele können in verschiedenen Browsern unterschiedliche Ausführungseffekte haben, mit Ausnahme von Beispiel 5 und 6 unterstützt nicht mehrere Dateien, andere Beispiele laufen normal. Sie können die Demo herunterladen.
Das obige ist der detaillierte Inhalt vonHTML5-Anleitung (3) – Drag-and-Drop-Funktion implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen