Informacja wizualna podczas przeciągania
Proszę stylizować elementy podczas przeciągania.
Informacja wizualna podczas przeciągania to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 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 JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Dlaczego informacje zwrotne w postaci wizualnej są ważne
Dobrze zaprojektowane przeciąganie i upuszczanie informuje użytkownika, co się dzieje: który element jest przenoszony, gdzie można go upuścić i czy upuszczenie jest prawidłowe. Bez takich informacji interakcja sprawia wrażenie niesprawnej.
Stylizowanie przeciąganego elementu
Należy przyciemnić lub przeskalować źródłowy element podczas dragstart, aby użytkownik widział, co zostało przez niego wybrane.
item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));Zdarzenie dragenter
dragenter uruchamia się, gdy przeciągany element wejdzie na potencjalny cel. Należy użyć go do wyróżnienia strefy.
zone.addEventListener("dragenter", (e) => {
e.preventDefault();
zone.classList.add("drag-over");
});Zdarzenie dragleave
dragleave uruchamia się, gdy element opuści cel. W tym miejscu należy usunąć wyróżnienie.
zone.addEventListener("dragleave", () => {
zone.classList.remove("drag-over");
});Problem migotania
Zdarzenia dragenter/dragleave uruchamiają się również dla elementów podrzędnych, co powoduje migotanie. Licznik lub sprawdzenie relatedTarget pozwala utrzymać stabilne wyróżnienie.
let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });Resetowanie po upuszczeniu
Należy zawsze wyczyścić stan wyróżnienia w procedurze obsługi drop, ponieważ po pomyślnym upuszczeniu zdarzenie dragleave może się nie uruchomić.
zone.addEventListener("drop", (e) => {
e.preventDefault();
depth = 0;
zone.classList.remove("drag-over");
});Dostosowywanie obrazu przeciągania
setDragImage(element, offsetX, offsetY) w dragstart zastępuje domyślny obraz przeciągania dowolnym elementem.
item.addEventListener("dragstart", (e) => {
const ghost = document.getElementById("custom-ghost");
e.dataTransfer.setDragImage(ghost, 20, 20);
});Kursor za pomocą dropEffect
Wygląd kursora — znak plusa przy kopiowaniu, strzałka przy przenoszeniu lub symbol niedozwolonego upuszczania — zależy od dropEffect ustawianego w dragover. Nieprawidłowe upuszczenia należy odrzucać za pomocą "none".
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});Wyświetlanie elementu zastępczego upuszczania
W sortowalnych listach należy wstawić element zastępczy w przewidywanym miejscu upuszczenia, aby użytkownik dokładnie widział, gdzie trafi element.
function showPlaceholder(beforeEl) {
list.insertBefore(placeholder, beforeEl);
}Obliczanie pozycji wstawienia
Należy porównać współrzędną Y wskaźnika z pionowym środkiem każdego elementu, aby określić, czy upuścić element przed nim, czy za nim.
function getAfterElement(container, y) {
const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
return items.find((el) => {
const box = el.getBoundingClientRect();
return y < box.top + box.height / 2;
});
}Informacje zwrotne dostępne dla wszystkich
Same wskazówki wizualne wykluczają użytkowników klawiatury i czytników ekranu. Aby zapewnić dostępność, należy połączyć przeciąganie i upuszczanie z komunikatami ARIA live oraz alternatywą opartą na klawiaturze.
Szybki test
Przetestować informacje zwrotne w postaci wizualnej.
Podsumowanie: informacje zwrotne w postaci wizualnej
Stylizowano przeciągany element, wyróżniano strefy za pomocą dragenter/dragleave, rozwiązano problem migotania za pomocą licznika głębokości, dostosowano obraz przeciągania, sterowano kursorem przez dropEffect i wyświetlano elementy zastępcze upuszczania. Następny temat: przeciąganie plików.
Często zadawane pytania
Czy lekcja „Informacja wizualna podczas przeciągania” jest bezpłatna?
Tak — pełny tekst „Informacja wizualna podczas przeciągania” 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 JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Informacja wizualna podczas przeciągania”?
Proszę stylizować elementy podczas przeciągania. Ćwiczysz JavaScript 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ąć JavaScript Academy?
Nie wymagamy żadnego doświadczenia. JavaScript 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 3 z 4.
Ile czasu zajmuje lekcja „Informacja wizualna podczas przeciągania”?
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 JavaScript Academy?
Tak. Każda lekcja JavaScript 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
- Tworzenie elementów przeciągalnych
- Miejsca upuszczania i dataTransfer
- Informacja wizualna podczas przeciągania
- Przeciąganie plików na stronę