HTML Academy · Lekcja

Obiekt dataTransfer

Przenoszenie danych między źródłem przeciągania a miejscem upuszczania

Obiekt dataTransfer to bezpłatna lekcja HTML 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 HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co zawiera dataTransfer

Obiekt dataTransfer jest dołączony do każdego zdarzenia przeciągania i stanowi jedyny kanał komunikacji między źródłem a elementem docelowym. Przenosi dane, listy plików, dozwolone efekty oraz wybrany efekt upuszczenia.

setData i getData

Źródło zapisuje dane określonego typu za pomocą e.dataTransfer.setData(format, value). Element docelowy odczytuje je za pomocą e.dataTransfer.getData(format). Oba argumenty są ciągami znaków; wartości są przed zapisaniem konwertowane na ciągi znaków.

src.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", "hello");
  e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));
});

Wiele typów MIME

Przechowywanie tego samego ładunku danych pod kilkoma typami sprawia, że przeciąganie jest interoperacyjne: "text/plain" działa w każdym edytorze tekstu, "text/uri-list" jest rozpoznawany przez przeglądarki jako adres URL, a "text/html" zachowuje formatowanie w edytorach tekstu. Element docelowy wybiera typ, który rozumie.

Ograniczenia odczytu poza drop

Ze względów prywatności przeglądarka udostępnia procedurom obsługi dragenter i dragover za pośrednictwem e.dataTransfer.types wyłącznie listę typów, a nie ich wartości. Rzeczywiste dane można odczytać tylko wewnątrz zdarzenia drop zaakceptowanego elementu docelowego.

Lista files

Gdy użytkownik przeciąga plik z pulpitu, e.dataTransfer.files jest obiektem FileList zawierającym obiekty File. Jest pusty w przypadku przeciągania rozpoczętego wewnątrz strony. Traktuj go jako podstawowy sposób wykrywania zewnętrznego upuszczenia pliku oraz uzyskiwania dostępu do jego rozmiaru, nazwy i typu.

Kolekcja items

e.dataTransfer.items udostępnia zarówno ciągi znaków, jak i pliki w postaci obiektów DataTransferItem. Każdy element ma właściwości kind ("string" lub "file"), type (MIME) oraz metody getAsString(cb) / getAsFile(). items to nowoczesna alternatywa dla files + getData, uwzględniająca typy danych.

for (const item of e.dataTransfer.items) {
  if (item.kind === "file") {
    const file = item.getAsFile();
    console.log(file.name);
  } else {
    item.getAsString((s) => console.log(item.type, s));
  }
}

effectAllowed a dropEffect

effectAllowed jest ustawiane przez źródło w zdarzeniu dragstart i określa operacje obsługiwane przez źródło. dropEffect jest ustawiane przez element docelowy w zdarzeniu dragover i wybiera jedną z tych operacji. Przeglądarka anuluje upuszczenie, jeśli obie wartości są niezgodne.

Niestandardowy obraz przeciągania

e.dataTransfer.setDragImage(node, x, y) zastępuje domyślny obraz zastępczy. Przekaż element DOM umieszczony poza ekranem i wystylizowany według potrzeb, a także przesunięcie kursora względem tego elementu. Zmiana dotyczy tylko bieżącego przeciągania.

clearData

e.dataTransfer.clearData() usuwa wszystkie formaty; clearData("text/plain") usuwa jeden format. Jest to rzadko potrzebne, ponieważ dataTransfer jest tworzony od nowa przy każdym przeciąganiu, ale może się przydać, gdy rozpoczniesz wypełnianie danych, a następnie zdecydujesz się je anulować.

Działanie między originami

Pliki przeciągnięte ze strony w originie A na stronę w originie B nadal są dostarczane — API działa między originami. Strona odbierająca widzi jednak tylko to, co źródło jawnie umieściło w dataTransfer; nie otrzymuje dostępu do dowolnych elementów DOM.

Przeciąganie z przeglądarki na pulpit

Zapisując typ "DownloadURL" (setData("DownloadURL", "image/png:filename.png:https://...")), strona może umożliwić użytkownikowi przeciągnięcie pliku z przeglądarki na pulpit. Obsługa jest ograniczona (przeglądarki oparte na Chromium), dlatego należy to wykrywać i zapewnić poprawne rozwiązanie zapasowe.

Sprawdzenie wiedzy

Dlaczego dataTransfer.getData() nie może zwrócić rzeczywiście przechowywanej wartości podczas zdarzenia dragover?

Podsumowanie

dataTransfer jest łącznikiem między źródłem przeciągania a miejscem upuszczenia. Należy używać setData/getData dla typowanych danych w postaci ciągów znaków, items jako ujednoliconego widoku plików i ciągów znaków, files w przypadku upuszczania plików z pulpitu, setDragImage dla niestandardowych podglądów oraz effectAllowed/dropEffect do uzgadniania operacji.

Często zadawane pytania

Czy lekcja „Obiekt dataTransfer” jest bezpłatna?

Tak — pełny tekst „Obiekt 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 HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Obiekt dataTransfer”?

Przenoszenie danych między źródłem przeciągania a miejscem upuszczania Ć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 3 z 4.

Ile czasu zajmuje lekcja „Obiekt 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 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ść

← Powrót do HTML Academy