HTML5 - Drag & Drop
Drag and Drop (DnD) ist ein leistungsstarkes Benutzeroberflächenkonzept, mit dem Elemente mithilfe von Mausklicks einfach kopiert, neu angeordnet und gelöscht werden können. Auf diese Weise kann der Benutzer die Maustaste über ein Element klicken und gedrückt halten, an eine andere Stelle ziehen und die Maustaste loslassen, um das Element dort abzulegen.
Um Drag & Drop-Funktionen mit herkömmlichem HTML4 zu erreichen, müssten Entwickler entweder komplexe JavaScript-Programmierung oder andere JavaScript-Frameworks wie jQuery usw. verwenden.
Jetzt hat HTML 5 eine Drag & Drop (DnD) -API entwickelt, die dem Browser native DnD-Unterstützung bietet und das Codieren erheblich vereinfacht.
HTML 5 DnD wird von allen gängigen Browsern wie Chrome, Firefox 3.5 und Safari 4 usw. unterstützt.
Drag & Drop-Ereignisse
Es gibt eine Reihe von Ereignissen, die in verschiedenen Phasen des Drag & Drop-Vorgangs ausgelöst werden. Diese Ereignisse sind unten aufgeführt -
| Sr.Nr. | Ereignisse & Beschreibung |
|---|---|
| 1 | dragstart Wird ausgelöst, wenn der Benutzer mit dem Ziehen des Objekts beginnt. |
| 2 | dragenter Wird ausgelöst, wenn die Maus zum ersten Mal über das Zielelement bewegt wird, während ein Ziehen ausgeführt wird. Ein Listener für dieses Ereignis sollte angeben, ob ein Ablegen über diesen Ort zulässig ist. Wenn keine Listener vorhanden sind oder die Listener keine Operationen ausführen, ist ein Löschen standardmäßig nicht zulässig. |
| 3 | dragover Dieses Ereignis wird ausgelöst, wenn die Maus beim Ziehen über ein Element bewegt wird. In den meisten Fällen entspricht der Vorgang, der während eines Listeners ausgeführt wird, dem Dragenter-Ereignis. |
| 4 | dragleave Dieses Ereignis wird ausgelöst, wenn die Maus ein Element verlässt, während ein Ziehen auftritt. Zuhörer sollten alle Hervorhebungs- oder Einfügungsmarkierungen entfernen, die für das Drop-Feedback verwendet werden. |
| 5 | drag Wird jedes Mal ausgelöst, wenn die Maus bewegt wird, während das Objekt gezogen wird. |
| 6 | drop Das Drop-Ereignis wird auf das Element ausgelöst, bei dem der Drop am Ende des Ziehvorgangs aufgetreten ist. Ein Listener ist dafür verantwortlich, die gezogenen Daten abzurufen und an der Ablagestelle einzufügen. |
| 7 | dragend Wird ausgelöst, wenn der Benutzer beim Ziehen eines Objekts die Maustaste loslässt. |
Note- Beachten Sie, dass nur Drag-Ereignisse ausgelöst werden. Mausereignisse wie Mausbewegungen werden während eines Ziehvorgangs nicht ausgelöst.
Das DataTransfer-Objekt
Die Ereignis-Listener-Methoden für alle Drag & Drop-Ereignisse akzeptieren Event Objekt mit einem schreibgeschützten Attribut dataTransfer.
Das event.dataTransfer kehrt zurück DataTransfer Objekt, das dem Ereignis wie folgt zugeordnet ist -
function EnterHandler(event) {
DataTransfer dt = event.dataTransfer;
.............
}Das DataTransfer- Objekt enthält Daten zum Drag & Drop-Vorgang. Diese Daten können abgerufen und in Bezug auf verschiedene Attribute festgelegt werden, die dem DataTransfer-Objekt zugeordnet sind, wie unten erläutert.
| Sr.Nr. | DataTransfer-Attribute und ihre Beschreibung |
|---|---|
| 1 | dataTransfer.dropEffect [ = value ]
|
| 2 | dataTransfer.effectAllowed [ = value ]
|
| 3 | dataTransfer.types Gibt eine DOMStringList zurück, in der die im Dragstart-Ereignis festgelegten Formate aufgelistet sind. Wenn Dateien gezogen werden, ist einer der Typen außerdem die Zeichenfolge "Dateien". |
| 4 | dataTransfer.clearData ( [ format ] ) Entfernt die Daten der angegebenen Formate. Entfernt alle Daten, wenn das Argument weggelassen wird. |
| 5 | dataTransfer.setData(format, data) Fügt die angegebenen Daten hinzu. |
| 6 | data = dataTransfer.getData(format) Gibt die angegebenen Daten zurück. Wenn keine solchen Daten vorhanden sind, wird die leere Zeichenfolge zurückgegeben. |
| 7 | dataTransfer.files Gibt eine Dateiliste der Dateien zurück, die gezogen werden, falls vorhanden. |
| 8 | dataTransfer.setDragImage(element, x, y) Verwendet das angegebene Element, um das Drag-Feedback zu aktualisieren und zuvor angegebenes Feedback zu ersetzen. |
| 9 | dataTransfer.addElement(element) Fügt das angegebene Element zur Liste der Elemente hinzu, die zum Rendern des Drag-Feedbacks verwendet werden. |
Drag & Drop-Prozess
Im Folgenden sind die Schritte aufgeführt, die zum Implementieren der Drag & Drop-Operation ausgeführt werden müssen:
Schritt 1 - Ein Objekt ziehbar machen
Hier sind Schritte zu unternehmen -
Wenn Sie ein Element ziehen möchten, müssen Sie das festlegen draggable zuschreiben true für dieses Element.
Legen Sie einen Ereignis-Listener für fest dragstart das speichert die Daten, die gezogen werden.
Der Ereignis-Listener dragstart legt die zulässigen Effekte fest (Kopieren, Verschieben, Verknüpfen oder eine Kombination).
Es folgt das Beispiel, um ein Objekt ziehbar zu machen -
<!DOCTYPE HTML>
<html>
<head>
<style type = "text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px; -moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type = "text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>
<div id = "boxA" draggable = "true"
ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB">Dustbin</div>
</center>
</body>
</html>Dies führt zu folgendem Ergebnis:
Schritt 2 - Löschen des Objekts
Um einen Drop zu akzeptieren, muss das Drop-Ziel mindestens drei Ereignisse abhören.
Das dragenterEreignis, mit dem bestimmt wird, ob das Drop-Ziel den Drop akzeptieren soll oder nicht. Wenn der Drop akzeptiert werden soll, muss diese Veranstaltung abgesagt werden.
Das dragoverEreignis, mit dem festgelegt wird, welches Feedback dem Benutzer angezeigt werden soll. Wenn das Ereignis abgebrochen wird, wird das Feedback (normalerweise der Cursor) basierend auf dem Wert des dropEffect-Attributs aktualisiert.
Endlich, das drop Ereignis, mit dem der eigentliche Drop ausgeführt werden kann.
Das folgende Beispiel zeigt, wie ein Objekt in ein anderes Objekt verschoben wird:
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px;-moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to move the purple box into the pink box.</div>
<div id="boxA" draggable="true" ondragstart="return dragStart(event)">
<p>Drag Me</p>
</div>
<div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
</center>
</body>
</html>Dies führt zu folgendem Ergebnis: