Event ondragover

DOM Events DragEvent

Definition and Usage

The ondragover event occurs when a draggable element or text selection is dragged to a valid drop target.

By default, data/elements cannot be deleted from other elements. To allow dropping, we must prevent the element's default handling. This is achieved by calling the event.preventDefault() method of the ondragover event.

Drag-and-drop is a very common feature in HTML5. It is when you 'grab' an object and drag it to a different position. For more information, please read our article about HTML5 Αναγκαία ΜετακίνησηHTML tutorial.

Note:To make an element draggable, use the global HTML5 draggable attribute.

Tip:By default, links and images are draggable without the draggable attribute.

Many events are used at different stages of drag-and-drop operations, and may occur:

Events triggered on the draggable target (source element):

  • ondragstart - Occurs when the user starts dragging the element
  • ondrag - Occurs when the element is dragged
  • ondragend - Occurs when the user finishes dragging the element

Events triggered on the target:

  • ondragenter - Occurs when the dragged element enters the target
  • ondragover - Occurs when the dragged element is on the target
  • ondragleave - Occurs when the dragged element leaves the target
  • ondrop - Occurs when the dragged element is placed on the target

Note:When dragging elements, the ondragover event is triggered every 350 milliseconds.

Example

Execute JavaScript when the element is dropped on the target:

<div ondragover="myFunction(event)"></div>

Δοκιμάστε προσωπικά

More TIY examples are available at the bottom of the page.

Syntax

In HTML:

<element ondragover="myScript">

Δοκιμάστε προσωπικά

In JavaScript:

object.ondragover = function(){myScript};

Δοκιμάστε προσωπικά

In JavaScript, use the addEventListener() method:

object.addEventListener("dragover", myScript);

Δοκιμάστε προσωπικά

Note:Internet Explorer 8 or earlier versions do not support addEventListener() method.

Technical details

Bubble: Supported
Cancelable: Supported
Event type: DragEvent
Supported HTML tags: All HTML elements
DOM version: Level 3 Events

Browser support

The numbers in the table indicate the first browser version that fully supports the event.

Event Chrome IE Firefox Safari Opera
ondragover 4.0 9.0 3.5 6.0 12.0

More examples

Παρουσίαση όλων των δυνατών γεγονότων σύρραξης:

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- Συνεδρίες που προκαλούνται στο στόχο της σύρραξης ----------------- */
document.addEventListener("dragstart", function(event) {
  // Η μέθοδος dataTransfer.setData() ορίζει τον τύπο και την τιμή των δεδομένων που συρράχνονται
  event.dataTransfer.setData("Text", event.target.id);
  // Εκτυπώνεται κείμενο όταν ξεκινά η σύρραξη του στοιχείου p
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // Αλλάζει την αδιαφάνεια του στοιχείου που μπορεί να συρραχθεί
  event.target.style.opacity = "0.4";
});
// Αλλάζει το χρώμα του κειμένου κατά τη διάρκεια της σύρραξης του στοιχείου p
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Εκτελείται μετά την ολοκλήρωση της σύρραξης του στοιχείου p και εκτυπώνεται κείμενο και επαναφέρεται η αδιαφάνεια
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});
/* ----------------- Συνεδρίες που προκαλούνται στην τοποθεσία του στόχου ----------------- */
// Όταν το μεταφερόμενο p στοιχείο εισέρχεται στο droptarget, αλλάξτε το στυλ του DIV των ορίων
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Παράδειγμα, δεν μπορείτε να τοποθετήσετε δεδομένα/στοιχεία σε άλλα στοιχεία. Για να επιτρέψετε την τοποθέτηση, πρέπει να αποτρέψετε την προεπιλεγμένη διαχείριση του στοιχείου
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Όταν το μεταφερόμενο p στοιχείο αποχωρεί από το droptarget, ανακτήστε το στυλ του DIV των ορίων
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Αντιμετώπιση απόθεσης - Αποτρέψτε την προεπιλεγμένη διαχείριση δεδομένων από τον περιηγητή (ανοίγοντας ως σύνδεσμος η προεπιλεγμένη τοποθέτηση)
Ανακτήστε τον χρωματισμό του κειμένου της έξοδου και τον χρωματισμό του DIV των ορίων
Ανακτήστε τα δεδομένα της μεταφοράς χρησιμοποιώντας τη μέθοδο dataTransfer.getData()
Τα μεταφερόμενα δεδομένα είναι το id του μεταφερόμενου στοιχείου ("drag1")
Προσθέστε το μεταφερόμενο στοιχείο στο στοιχείο τοποθέτησης
*/
document.addEventListener("drop", function(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(data));
  }
});
</script>

Δοκιμάστε προσωπικά

Σχετικές σελίδες

Εκμάθηση HTML: η μεταφορά στοιχείων HTML5

HTML εγχειρίδιο αναφοράς: η ιδιότητα draggable του HTML

DOM Events DragEvent