Miejsca upuszczania i dataTransfer
Proszę akceptować upuszczane dane i je przenosić.
Miejsca upuszczania i dataTransfer to bezpłatna lekcja JavaScript 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 JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Co tworzy miejsce docelowe upuszczania?
Domyślnie elementy odrzucają upuszczane obiekty. Aby zaakceptować upuszczenie, należy zapobiec domyślnemu zachowaniu zarówno w zdarzeniu dragover, jak i w zdarzeniu drop. To zdecydowanie najczęstsza pułapka.
Zezwalanie na upuszczanie za pomocą dragover
Przeglądarka blokuje upuszczanie, chyba że w procedurze obsługi dragover wywoła się preventDefault(). Bez tego zdarzenie drop nigdy się nie uruchomi.
const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
e.preventDefault(); // REQUIRED to allow drop
});Zdarzenie drop
Gdy użytkownik zwolni przycisk nad prawidłowym celem, uruchamia się zdarzenie drop. Tutaj również należy zablokować domyślne działanie — zapobiega to otwieraniu przez przeglądarkę upuszczonych plików lub adresów URL — i odczytać dane.
zone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
console.log("Dropped", id);
});Odczytywanie danych dataTransfer
getData(format) pobiera dane zapisane podczas dragstart. Ciąg formatu musi być zgodny z ustawioną wcześniej wartością.
const payload = e.dataTransfer.getData("text/plain");Przenoszenie elementu
Klasyczne zastosowanie: należy dodać przeciągnięty węzeł do strefy upuszczania za pomocą przekazanego identyfikatora.
zone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
zone.appendChild(dragged);
});Wiele formatów danych
dataTransfer może jednocześnie przechowywać kilka formatów — na przykład text/plain i application/json — a cel odczytuje ten, który rozpoznaje.
e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));Ustawianie dropEffect
W dragover należy ustawić dropEffect na "copy", "move" lub "link", aby sterować kursorem i semantyką operacji.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
});effectAllowed a dropEffect
effectAllowed (ustawiane przez źródło) określa, co jest dozwolone, a dropEffect (ustawiane przez cel) wybiera jedno z tych działań. Współpracują ze sobą, aby wyświetlać właściwy kursor.
Zmienianie kolejności listy
Należy połączyć pozycję upuszczenia z wstawianiem elementów, aby zmieniać ich kolejność. Trzeba określić, czy element ma zostać wstawiony przed elementem znajdującym się pod kursorem, czy za nim.
list.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
list.insertBefore(dragged, e.target);
});Rozpoznawanie celu upuszczania
Należy użyć e.target (elementu znajdującego się pod wskaźnikiem) oraz closest(), aby znaleźć właściwy kontener, gdy cele są zagnieżdżone.
zone.addEventListener("drop", (e) => {
const slot = e.target.closest(".slot");
if (slot) slot.appendChild(getDragged(e));
});Usuwanie danych
dataTransfer.clearData() usuwa wszystkie przechowywane dane, a przekazanie formatu usuwa tylko dane w tym formacie. Magazyn i tak jest automatycznie resetowany po zakończeniu przeciągania.
e.dataTransfer.clearData("text/plain");Szybki test
Przetestować cele upuszczania.
Podsumowanie: cele upuszczania i dataTransfer
Utworzono strefy upuszczania przez wywołanie preventDefault() w zdarzeniach dragover i drop, odczytano dane za pomocą getData, przenoszono i porządkowano elementy, ustawiono dropEffect oraz obsłużono zagnieżdżone cele. Następny temat: informacje zwrotne w postaci wizualnej.
Często zadawane pytania
Czy lekcja „Miejsca upuszczania i dataTransfer” jest bezpłatna?
Tak — pełny tekst „Miejsca upuszczania i dataTransfer” 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 „Miejsca upuszczania i dataTransfer”?
Proszę akceptować upuszczane dane i je przenosić. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Miejsca upuszczania i dataTransfer”?
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ę