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.