wydarzenie ondragover
Przykład
Wykonaj JavaScript, gdy element jest przeciągany nad cel upuszczania:
<div ondragover="myFunction(event)"></div>
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Zdarzenie ondragover występuje, gdy przeciągany element lub zaznaczony tekst jest przeciągany nad prawidłowy cel upuszczania.
Domyślnie danych/elementów nie można usunąć w innych elementach. Aby zezwolić na upuszczenie, musimy uniemożliwić domyślną obsługę elementu. Odbywa się to poprzez wywołanie metody event.preventDefault() dla zdarzenia ondragover.
Przeciąganie i upuszczanie to bardzo powszechna funkcja w HTML5. Dzieje się tak, gdy „chwycisz” obiekt i przeciągniesz go w inne miejsce. Więcej informacji znajdziesz w naszym samouczku HTML dotyczącym przeciągania i upuszczania HTML5 .
Uwaga: aby umożliwić przeciąganie elementu, użyj globalnego atrybutu przeciągania HTML5.
Porada: Łącza i obrazy można domyślnie przeciągać i nie wymagają one atrybutu przeciągania.
Istnieje wiele zdarzeń, które są używane i mogą wystąpić na różnych etapach operacji przeciągania i upuszczania:
- Zdarzenia uruchomione na przeciąganym celu (element źródłowy) :
- ondragstart - występuje, gdy użytkownik zaczyna przeciągać element
- ondrag - występuje, gdy element jest przeciągany
- ondragend - występuje, gdy użytkownik zakończy przeciąganie elementu
- Zdarzenia wystrzeliwane na cel zrzutu:
- ondragenter - występuje, gdy przeciągany element wchodzi w cel upuszczania
- ondragover - występuje, gdy przeciągany element znajduje się nad celem upuszczania
- ondragleave - występuje, gdy przeciągany element opuszcza cel upuszczania
- ondrop - występuje, gdy przeciągany element jest upuszczany na cel upuszczania
Uwaga: podczas przeciągania elementu zdarzenie ondragover uruchamia się co 350 milisekund.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenie.
Event | |||||
---|---|---|---|---|---|
ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Składnia
W HTML:
<element ondragover="myScript">
W JavaScript:
object.ondragover = function(){myScript};
W JavaScript za pomocą metody addEventListener():
object.addEventListener("dragover", myScript);
Uwaga: Metoda addEventListener() nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.
Szczegóły techniczne
Bąbelki: | tak |
---|---|
Możliwość anulowania: | tak |
Typ wydarzenia: | DragEvent |
Obsługiwane tagi HTML: | Wszystkie elementy HTML |
Wersja DOM: | Wydarzenia poziomu 3 |
Więcej przykładów
Przykład
Demonstracja WSZYSTKICH możliwych zdarzeń przeciągania i upuszczania:
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
// Events fired on the drag target
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
// Events fired on the drop target
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
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>
Powiązane strony
Samouczek HTML: przeciąganie i upuszczanie HTML5
Odniesienie HTML: przeciągany atrybut HTML