Zdarzenia dragover i drop
Definiowanie prawidłowych miejsc upuszczania i obsługa zdarzenia drop
Zdarzenia dragover i drop to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Elementy docelowe wymagają dwóch procedur obsługi
Element docelowy musi obsługiwać zarówno dragover (aby zezwolić na upuszczenie), jak i drop (aby je odebrać). Bez dragover przeglądarka odmawia wyemitowania drop, ponieważ jej domyślne zachowanie zakłada, że „żaden element nie jest miejscem docelowym upuszczania”.
preventDefault jest konieczne
W procedurze obsługi dragover musisz wywołać e.preventDefault(). Anuluje to domyślne zachowanie przeglądarki, które odrzuca upuszczenie. Bez tego kursor pozostaje w stanie „niedozwolone”, a zdarzenie drop nigdy nie zostanie wyemitowane, niezależnie od działań użytkownika.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
});
zone.addEventListener("drop", (e) => {
e.preventDefault();
console.log(e.dataTransfer.getData("text/plain"));
});dragenter i dragleave
dragenter jest emitowane raz, gdy kursor wchodzi na element docelowy, a dragleave — raz, gdy go opuszcza. Używaj ich do przełączania wizualnego wyróżnienia „przeciąganie nad elementem”: dodaj klasę przy wejściu i usuń ją przy wyjściu, aby użytkownik widział, który obszar odbierze upuszczany element.
dragleave jest emitowane dla elementów potomnych
Istnieje subtelny szczegół: przesunięcie kursora nad element potomny wywołuje dragleave na elemencie nadrzędnym, a następnie dragenter na elemencie potomnym. Użyj licznika zwiększanego w dragenter i zmniejszanego w dragleave, usuwając wyróżnienie dopiero wtedy, gdy licznik wróci do zera.
let counter = 0;
zone.addEventListener("dragenter", () => {
counter++;
zone.classList.add("over");
});
zone.addEventListener("dragleave", () => {
counter--;
if (counter === 0) zone.classList.remove("over");
});Ustawianie dropEffect
Wewnątrz dragover ustaw e.dataTransfer.dropEffect = "move" (lub "copy", "link", "none"), aby sterować kursorem i poinformować element źródłowy, co się wydarzy. Efekt musi być zgodny z effectAllowed elementu źródłowego, w przeciwnym razie upuszczenie zostanie odrzucone.
Odczytywanie danych podczas drop
W procedurze obsługi drop wywołaj e.dataTransfer.getData(format), używając tego samego typu MIME, który został użyty w setData (zwykle "text/plain"). Następnie znajdź element po identyfikatorze, dołącz go do elementu docelowego, zaktualizuj model danych lub wykonaj dowolną inną operację wymaganą przez aplikację.
Zapobieganie domyślnemu działaniu podczas drop
W procedurze obsługi drop również potrzebujesz e.preventDefault(). Bez tego przeglądarka powróci do swojego natywnego zachowania — w przypadku upuszczonego adresu URL oznacza to przejście do odnośnika, które natychmiast usunie stan strony.
Upuszczanie z pulpitu
Przeglądarka przekształca pliki przeciągnięte z systemu operacyjnego w zdarzenie drop z wypełnionym polem e.dataTransfer.files. Iteruj po obiekcie FileList i odczytuj każdy plik za pomocą File API, aby obsługiwać przesyłanie obrazów, przeglądarki plików dziennika lub importery dokumentów.
zone.addEventListener("drop", (e) => {
e.preventDefault();
for (const file of e.dataTransfer.files) {
console.log(file.name, file.size);
}
});Wiele typów w dataTransfer
setData może przechowywać ten sam ładunek danych pod kilkoma typami MIME: "text/plain" jako rozwiązanie zapasowe, "text/uri-list" dla adresów URL oraz "application/json" dla ustrukturyzowanych danych. Element docelowy wybiera najbardziej rozbudowany typ, który rozumie, za pomocą getData.
Koordynacja ze zdarzeniami dotykowymi
Przeglądarki mobilne nie generują zdarzeń dragover i drop na podstawie dotyku. Aby uzyskać spójne działanie, użyj Pointer Events wraz z ręcznym wykrywaniem elementu pod punktem albo biblioteki abstrahującej różnice. Natywne HTML5 DnD najlepiej traktować jako rozwiązanie przeznaczone wyłącznie na komputery.
Wskazówka dotycząca wydajności
dragover jest emitowane nieprzerwanie podczas poruszania kursorem — często dziesiątki razy na sekundę. Procedura obsługi powinna być lekka: unikaj kosztownych zapytań do DOM i odczytów układu wewnątrz niej. Zapisz prostokąty podczas dragenter i używaj ich ponownie, gdy kursor pozostaje nad elementem docelowym.
Sprawdź swoją wiedzę
Dlaczego zdarzenie drop nigdy nie jest emitowane na elemencie docelowym, dopóki nie wywołasz e.preventDefault() w procedurze obsługi dragover?
Podsumowanie
Działający element docelowy nasłuchuje zdarzeń dragover (zawsze wywołuj preventDefault, opcjonalnie ustaw dropEffect) oraz drop (ponownie wywołaj preventDefault, a następnie odczytaj dataTransfer.getData lub dataTransfer.files). Używaj dragenter i dragleave wraz z licznikiem do wyróżniania elementu, a procedury obsługi utrzymuj lekkie, ponieważ dragover jest emitowane bardzo często.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Zdarzenia dragover i drop” jest bezpłatna?
Tak — pełny tekst „Zdarzenia dragover i drop” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Zdarzenia dragover i drop”?
Definiowanie prawidłowych miejsc upuszczania i obsługa zdarzenia drop Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Zdarzenia dragover i drop”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Atrybut draggable i zdarzenie dragstart
- Zdarzenia dragover i drop
- Obiekt dataTransfer
- Praktyczna lista sortowana metodą przeciągnij i upuść