Zdarzenie ondragenter
Definicja i użycie
Wydarzenie ondragenter występuje, gdy element przeciągany lub wybrany tekst wchodzi w有效ne miejsce docelowe.
wydarzeniach ondragenter i ondragleave, które mogą pomóc użytkownikowi zrozumieć, że dany element przeciągany jest wkraczający lub opuszczający miejsce docelowe. Na przykład, można ustawić kolor tła, gdy element wchodzi w miejsce docelowe, i usunąć kolor, gdy element opuszcza miejsce docelowe.
Przeciąganie i upuszczanie to bardzo powszechna funkcja w HTML5. Oznacza to, że gdy "przechwyca się" obiekt i przeciąga go do innej pozycji. Aby dowiedzieć się więcej, przeczytaj nasze informacje o Przenoszenie HTML5nauczycie HTML.
Komentarz:Aby uczynić element przeciągalnym, użyj globalnego Atrybut draggable HTML5.
Wskazówka:Domyślnie, linki i obrazy są przeciągane, nie jest wymagana właściwość draggable.
W różnych etapach operacji przeciągania i upuszczania używane są wiele wydarzeń i mogą wystąpić:
Wydarzenia wywoływane na elemencie źródłowym (cel przeciągania):
- ondragstart - Gdy użytkownik zaczyna przeciągać element
- ondrag - Gdy element jest przeciągany
- ondragend - Gdy użytkownik kończy przeciąganie elementu
Wydarzenia wywoływane na miejscu docelowym:
- ondragenter - Gdy przeciągany element wchodzi w miejsce docelowe
- ondragover - Gdy przeciągany element znajduje się na miejscu docelowym
- ondragleave - Gdy przeciągany element opuszcza miejsce docelowe
- ondrop - Gdy przeciągany element jest umieszczany na miejscu docelowym
Przykład
Wykonaj JavaScript, gdy element przeciągany wchodzi w miejsce docelowe:
<div ondragenter="myFunction(event)"></div>
Poniżej znajdują się więcej przykładów TIY.
Gramatyka
W HTML:
<element ondragenter="myScript">
W JavaScript:
obiekt.ondragenter = function(){myScript};
W JavaScript, używając metody addEventListener():
obiekt.addEventListener("dragenter", myScript);
Komentarz:Internet Explorer 8 lub wcześniejsze wersje nie obsługują metoda addEventListener().
Szczegóły techniczne
| Bąbelkowanie: | Wspierane |
|---|---|
| Można anulować: | Wspierane |
| Typ wydarzenia: | DragEvent |
| Wspierane etykiety HTML: | Wszystkie elementy HTML |
| Wersja DOM: | Wydarzenia poziomu 3 |
Wsparcie przeglądarki
Numer w tabeli podaje pierwszą wersję przeglądarki, która w pełni obsługuje to wydarzenie.
| wydarzenie | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Więcej przykładów
Pokaz demo dla wszystkich możliwych wydarzeń przeciągania i upuszczania:
<p draggable="true" id="dragtarget">Przeciągnij mnie!</p>
<div class="droptarget">Spuść tutaj!</div>
<script>
/* ----------------- Wydarzenia wywoływane na celu przeciągania ----------------- */
document.addEventListener("dragstart", function(event) {
// Metoda dataTransfer.setData() ustawia typ i wartość danych przeciąganego elementu
event.dataTransfer.setData("Text", event.target.id);
// Wyświetl kilka tekstów podczas rozpoczynania przeciągania elementu p
document.getElementById("demo").innerHTML = "Rozpoczęto przeciąganie elementu p.";
// Zmień przezroczystość przeciąganych elementów
event.target.style.opacity = "0.4";
});
// Zmień kolor wyświetlanego tekstu podczas przeciągania elementu p
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Po zakończeniu przeciągania elementu p wyświetl kilka tekstów i zresetuj przezroczystość
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Zakończono przeciąganie elementu p.";
event.target.style.opacity = "1";
});
/* ----------------- Wydarzenia wywoływane na celu umieszczenia ----------------- */
// Zmień styl ramki DIV, gdy element p, który można przeciągać, wchodzi do droptarget
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Domyślnie nie można umieszczać danych/elementów w innych elementach. Aby umożliwić umieszczanie, musimy zablokować domyślne przetwarzanie elementu
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Przywróć styl ramki DIV, gdy element p, który można przeciągać, opuszcza droptarget
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Na upuszczenie - zapobiegaj domyślnemu przetwarzaniu danych przeglądarki (domyślne umieszczanie jako linki)
Resetuj kolor tekstu i kolor ramki DIV
Uzyskaj dane przeciągane za pomocą metody dataTransfer.getData()
Dane przeciągane to id elementu przeciąganego ("drag1")
Dodaj element do elementu docelowego, który jest przeciągany
*/
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>
