OnDragLeave Veranstaltung
Beispiele
Wird ausgeführt, wenn ein verschiebbares Element aus dem Drop-Ziel JavaScript:
Versuchen »
Ende dieses Artikels enthält weitere Beispiele.
Definition und Verwendung
OnDragLeave Ereignis, wenn ein verschiebbares Element oder ausgewählten Text aus dem Drop-Ziel Trigger-Ausführung.
OnDragEnter und OnDragLeave Ereignisse können die Benutzer besser helfen die ziehbar Elemente geben zu verstehen und die Drop-Zone Prozess verlassen. Sie können andere Hintergrundfarbe gesetzt, wenn das ziehbar Element eintritt und die Drop-Zone.
HTML5 Drag and Drop ist ein sehr häufiges Merkmal. Für weitere Informationen siehe unsere HTML - Tutorial HTML5 Drag & Drop .
Hinweis: Um das Element ziehbar zu machen, müssen Sie die HTML5 verwenden ziehbar mit Eigentum.
Tipp: Die Standard - Links und Bilder sind ziehbar, kein Attribut draggable.
Drag & Drop-Verfahren werden die folgenden Ereignisse ausgelöst werden:
- Triggerereignis (Quellelement) auf dem Drag - Ziel:
- onDragStart - ausgelöst , wenn der Benutzer Elemente beginnt ziehen
- ondrag - das Element in die Länge gezogen Trigger
- ondragend - ausgelöst , nachdem der Benutzer vervollständigt das Drag - Element
- Lösen der Ziel Trigger - Ereignisse:
- OnDragEnter - Dieses Ereignis wird ausgelöst, wenn die Maus - Objekt in seinem Container Bereich gezogen wird
- OnDragOver - Dieses Ereignis wird ausgelöst , wenn ein Objekt per Drag Objektcontainer in einem anderen Bereich gezogen wird
- OnDragLeave - Dieses Ereignis wird ausgelöst, wenn die Maus weg in dessen Container Bereich vom Objekt gezogen wird
- onDrop - in einem Schleppen, lassen Sie die Maustaste los, wenn Sie dieses Ereignis auslösen
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die erste Browser, um diese Version der Ereignisse zu unterstützen.
Ereignis | |||||
---|---|---|---|---|---|
OnDragLeave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Grammatik
In HTML:
In JavaScript:
JavaScript, verwenden Sie die Methode addEventListener ():
Hinweis: Internet Explorer 8 und frühere Versionen von IE nicht unterstützen addEventListener () Methode.
Technische Details
Ob die Blase zu unterstützen: | ja |
---|---|
Es kann abgebrochen werden: | keine |
Ereignistyp: | Dragevent |
Unterstützte HTML-Tags: | Alle HTML-Elemente |
Weitere Beispiele
Beispiele
Das folgende Beispiel zeigt alle der Drag-and-Drop-Ereignisse:
document.addEventListener ( "drag", Funktion (event) {
//dataTransfer.setData () -Methode den Datentyp und ziehen Daten einstellen
event.dataTransfer.setData ( "Text", event.target.id);
// Ausgabe einen Text beim Ziehen p Element
( "Demo") document.getElementById innerHTML- = "beginnen p Element ziehen..";
Ändern Sie die Transparenz des Schleppelements //
event.target.style.opacity = "0.4";
});
// P Schleppelement zur gleichen Zeit, ändern die Farbe der Textausgabe
document.addEventListener ( "ziehen", Funktion (event) {
( "Demo") document.getElementById style.color = "red".
});
// Ende p Element Ausgabe beim Ziehen einige Textelemente und Reset-Transparenz
document.addEventListener ( "dragend", Funktion (event) {
( "Demo") document.getElementById innerHTML- = "complete p drag Element.";
event.target.style.opacity = "1";
});
/ * Nach Beendigung des Schlepp Trigger * /
Füllen Sie das Schleppelement // wenn p eingeben Droptarget, Rahmenarten ändern div
document.addEventListener ( "dragenter", function (event) {
if (event.target.className == "Droptarget") {
event.target.style.border = "3px gepunkteten rot";
}
});
// Standardmäßig Daten / Elemente können nicht in andere Elemente per Drag & Drop. Bei der Fall müssen wir Standardverarbeitungselemente verhindern
document.addEventListener ( "dragover", Funktion (event) {
Event.preventDefault ();
});
// Wenn Drag & Drop die p Elemente Droptarget verlassen, Reset div-Stile Grenze
document.addEventListener ( "Dragleave", Funktion (event) {
if (event.target.className == "Droptarget") {
event.target.style.border = "";
}
});
/ * Für Drop Standardverarbeitung Datenbrowser verhindern (in der Drop-Link ist standardmäßig aktiviert)
Zurücksetzen Ausgangsgrenzfarbe und Textfarbe des DIV
Verwenden Sie dataTransfer.setData () -Methode, um fallen gelassen Daten erhalten
Mop Datenelement-ID ( "drag1")
Zusätzliche Elemente zum Drag & Drop-Element * /
document.addEventListener ( "drop", Funktion (event) {
Event.preventDefault ();
if (event.target.className == "Droptarget") {
document.getElementById ( "Demo") style.color = ".";
event.target.style.border = "";
var data = event.dataTransfer.getData ( "Text");
event.target.appendChild (document.getElementById (Daten));
}
});
Versuchen »
Verwandte Seiten
HTML Tutorial: die HTML5 Drag and Drop
HTML - Referenzhandbuch: HTML - Attribut ziehbar mit
Ereignisobjekte