ondrop Veranstaltung
Beispiele
JavaScript wird ausgeführt, wenn ein verschiebbares Element im <div> Element platziert wird:
Versuchen »
Ende dieses Artikels enthält weitere Beispiele.
Definition und Verwendung
ondrop Ereignis ausgelöst wird, wenn ein verschiebbares Element oder ausgewählte Text wird im Zielbereich platziert.
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
Hinweis: Wenn Sie die Elemente ziehen, alle 350 Millisekunden OnDragOver Ereignis auslöst.
Ereignis | |||||
---|---|---|---|---|---|
ondrop | 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: | ja |
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