SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

JavaScript/DOM/Event/dragover

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Event
Wechseln zu: Navigation, Suche

Der dragover-Event-Handler feuert, wenn Sie ein Element oder eine Textauswahl auf/über ein gewünschtes Ziel-Element ziehen. Das Event wird auf jedem potenziellen Ziel-Element ausgelöst.

bubbles

ja

cancelable

ja

mögliche Auslöser

allen Elementen

Event-Objekt

Drag-Event

var dragged;
/* events fired on the draggable target */
document.addEventListener("drag", function(event) {
}, false);
document.addEventListener("dragstart", function(event) {
 // store a ref. on the dragged elem
 dragged = event.target;
 // make it half transparent
 event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function(event) {
 // reset the transparency
 event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
 // prevent default to allow drop
 event.preventDefault();
}, false);
document.addEventListener("dragenter", function(event) {
 // highlight potential drop target when the draggable element enters it
 if (event.target.className == "dropzone") {
 event.target.style.background = "purple";
 }
}, false);
document.addEventListener("dragleave", function(event) {
 // reset background of potential drop target when the draggable element leaves it
 if (event.target.className == "dropzone") {
 event.target.style.background = "";
 }
}, false);

Das Event wird während einer Drag-Operation permanent gefeuert. Das geschieht bei ruhender Maus seltener, bei bewegter Maus häufiger.

Die Standardreaktion des Browsers auf dieses Event besteht darin, die aktuelle Drag-Operation auf "copy" oder "move" zu setzen, wenn das Ziel-Element ein input-Element mit type="text", ein textarea-Element oder ein contenteditable-Element ist. Andernfalls setzt er die Drag-Operation auf "none" - was das Ablegen des gezogenen Objekts auf dem Ziel-Element verhindert.

Sie können einen Eventhandler für dragover schreiben, der die preventDefault-Methode auf dem Event-Objekt aufruft, das dem Handler übergeben wird. Dadurch ermöglichen Sie das Ablegen auf beliebigen Elementen. Sie müssen zusätzlich auch das drop-Event behandeln, und dort auf die Drop-Aktion reagieren.


Siehe auch

Weblinks

Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/DOM/Event/dragover&oldid=97370"