Drag & Drop ist ein Teil des HTML5-Standard.
Ziehen Sie das Bild oben in das Rechteck.
in HTML
Die HTML5-Arbeitsentwurf Spezifikation beinhaltet die Unterstützung für Drag & Drop. HTML5 unterstützt verschiedene Arten von Ziehen und Ablegen von Funktionen, einschließlich:
- Drag & Drop Texte und HTML-Codes
- Drag & Drop HTML-Elemente
- Drag and Drop von Dateien
Basierend auf benötigte Aktion kann eine der oben genannten Typen verwendet werden. Beachten Sie, dass, wenn ein HTML-Element zum Bewegen der aktuellen Position gezogen wird, wird seine ID an das Ziel übergeordneten Element gesendet wird; so sendet er einen Text und kann als erste Gruppe in Betracht gezogen werden.
Googles Web-basierte E-Mail-Anwendung Google Mail unterstützt Drag-and-Drop von Bildern und Anhängen in dem neuesten Browser Google Chrome und Safari von Apple (5.x). Und Google Bildsuche unterstützt Drag & Drop.
Drag and Drop
Drag & Drop ist ein sehr häufiges Merkmal. Es ist , wenn Sie "grab" ein Objekt und es an einen anderen Ort ziehen.
In HTML5, Drag & Drop ist Teil des Standard, und jedes Element ziehbar sein kann.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die Drag & Drop voll unterstützt.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Drag and Drop Beispiel
Das folgende Beispiel ist ein einfacher Drag & Drop-Beispiel:
Beispiel
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html> Versuch es selber " Es könnte kompliziert erscheinen, aber lässt die alle verschiedene Teile eines Drag-and-Drop-Ereignis durchlaufen.
Machen Sie ein Element Ziehbare
Zunächst einmal: ein Element ziehbar zu machen, setzen Sie das draggable Attribut true :
<img draggable="true">
Was zu ziehen - onDragStart und setData()
Dann bestimmen, was passieren soll, wenn das Element gezogen wird.
In dem obigen Beispiel die ondragstart ruft Attribut einer Funktion, drag(event) , die angibt , welche Daten gezogen werden.
Der dataTransfer. setData() - dataTransfer. setData() dataTransfer. setData() Methode setzt den Datentyp und den Wert der gezogenen Daten:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
In diesem Fall ist der Datentyp "text" und der Wert ist die ID des ziehbare Element ("drag1") .
Wo Drop - ondragover
Das ondragover Ereignis gibt an, wo die gezogenen Daten abgelegt werden können.
In der Standardeinstellung Daten / Elemente können nicht in andere Elemente fallen gelassen werden. Um einen Tropfen zu ermöglichen, müssen wir die Standardbehandlung des Elements verhindern.
Dies wird durch den Aufruf der getan event. preventDefault() event. preventDefault() Methode zum ondragover Ereignisse:
event . preventDefault()
Tun Sie das Drop - ondrop
Wenn die gezogenen Daten fallen gelassen wird, kommt es zu einem Drop-Ereignis.
In dem obigen Beispiel die ondrop nennt Attribut eine Funktion, drop(event) :
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
Code erklärt:
- Rufen Sie preventDefault() die Browser Standardbehandlung der Daten zu verhindern (default is open as link on drop)
- Holen Sie sich die gezogenen Daten mit den dataTransfer. getData() - dataTransfer. getData() dataTransfer. getData() Methode. Dieses Verfahren wird alle Daten zurück , die auf die gleiche Art in der eingestellt war setData() Methode
- Die gezogenen Daten ist die ID des gezogenen Elements ("drag1")
- Append das gezogene Element in das drop - Element
Drag - Bild hin und her
Wie ziehen (and drop) ein Bild hin und her zwischen zwei <div> Elemente.