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
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
- MDN: Dragover Event