ondragenter Wydarzenie
Przykład
Wykonaj JavaScript, gdy przeciągany element wejdzie w cel upuszczania:
<div ondragenter="myFunction(event)"></div>
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Zdarzenie ondragenter występuje, gdy przeciągany element lub zaznaczony tekst wejdzie w prawidłowy cel upuszczania.
Zdarzenia ondragenter i ondragleave mogą pomóc użytkownikowi zrozumieć, że element, który można przeciągać, zaraz wejdzie lub opuści cel upuszczania. Można to zrobić, na przykład, ustawiając kolor tła, gdy przeciągany element wchodzi do miejsca docelowego upuszczania i usuwając kolor, gdy element jest przesuwany poza miejsce docelowe.
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
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenie.
Event | |||||
---|---|---|---|---|---|
ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Składnia
W HTML:
<element ondragenter="myScript">
W JavaScript:
object.ondragenter = function(){myScript};
W JavaScript za pomocą metody addEventListener():
object.addEventListener("dragenter", 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