API HTML5 typu drag-and-drop (DnD) oznacza, że niemal każdy element na stronie może stać się przeciągalny. W tym artykule omówimy podstawy przeciągania i upuszczania.
Twórz treści do przeciągania
Warto zauważyć, że w większości przeglądarek wybory tekstu, obrazy i linki są domyślnie przeciągane. Na przykład, jeśli przeciągniesz logo Google w Google Search, zobaczysz obraz ducha. Obraz można następnie przeciągnąć i upuścić do paska adresowego, <input type="file" /> element, a nawet na pulpicie. Aby inne typy treści były ciągnięte, musisz użyć API HTML5 DnD.
Aby uczynić obiekt przeciągalnym, ustaw elementdraggable=true。 Przeciąganie może być obsługiwane niemal dla każdego elementu, w tym obrazów, plików, linków, plików czy dowolnego znacznika na stronie.
W naszym przykładzie stworzymy interfejs do przestawiania kolumn, które zostały rozłożone za pomocą CSS Grid. Podstawowy znacznik dla tych kolumn przedstawiono poniżej, z właściwością przeciągania ustawioną na true dla każdej kolumny.
Oto CSS dla moich elementów kontenera i pudełka. Zwróć uwagę, że jedynym CSS związanym z funkcjonalnością DnD jest właściwość kursora: move. Reszta kodu kontroluje jedynie układ i styl elementów kontenera i pudełka.
W tym momencie zobaczysz, że możesz przeciągnąć przedmiot, ale nic więcej się nie wydarzy. Aby dodać funkcjonalność DnD, musimy użyć API JavaScript.
Słuchaj wydarzeń drag
Można dołączyć wiele różnych zdarzeń, aby monitorować cały proces przeciągania i upuść.
- Dragstart
- przeciągnąć
- Dragenter
- Dragleave
- Dragover
- kropla
- ciągnąć
Aby przetworzyć strumień DnD, potrzebujesz jakiegoś elementu źródłowego (punktu startowego dragu), ładunku danych (to, co próbujesz umieścić) oraz celu (obszaru, w którym jest miejsce zatrzasku). Elementami źródłowymi mogą być obrazy, listy, linki, obiekty plików, bloki HTML itp. Celem jest zaakceptowanie strefy zrzutu (lub zestawu stref zrzutu) danych, które użytkownik próbuje umieszczać. Pamiętaj, że nie wszystkie elementy mogą być celami, na przykład obrazy nie mogą być celami.
Rozpocznij i zakończ sekwencję przeciągania i upuść
Po zdefiniowaniu właściwości draggable="true" na treści, dołącz obsługę zdarzeń dragstart, aby rozpocząć sekwencję DnD dla każdej kolumny.
Ten kod ustawi przezroczystość kolumny na 40% podczas rozpoczęcia przeciągania, a następnie przywraca ją do 100% po zakończeniu zdarzenia przeciągania.
Wyniki można zobaczyć w demie Glitch poniżej. Przeciągnij przedmiot, a stanie się nieprzezroczysty. Ponieważ zdarzenie dragstart jest skierowane do elementu źródłowego, ustawienie this.style.opacity na 40% daje użytkownikowi wizualną informację zwrotną, że wybrany element się przesuwa. Po umieszczeniu elementu element źródłowy wraca do 100% przezroczystości, choć funkcja umieszczania nie została jeszcze zapisana.
Użyj dragentera, dragovera i dragleave, aby dodać dodatkowe wizualne wskazówki
Aby pomóc użytkownikom zrozumieć, jak korzystać z interfejsu, używaj obsługi zdarzeń dragenter, dragover i dragleave. W poniższym przykładzie kolumny mogą być przeciągane lub celowane. Aby ułatwić użytkownikom zrozumienie tego, gdy użytkownik przeciąga element obok kolumny, jego ramka staje się linią przerywaną. Na przykład możesz stworzyć klasę nadrzędną w CSS, aby reprezentować element będący celem rozmieszczenia:
Następnie ustaw w JavaScript obsługę zdarzeń, aby dodać klasę over przy przeciąganiu obok kolumny i usunąć ją przy wyjściu. W przeciągaczu chcemy również upewnić się, że klasa jest usuwana na końcu przeciągania.
W tym kodzie warto wspomnieć kilka kwestii:
Przeciągając element, taki jak link, musisz zablokować domyślne zachowanie przeglądarki, czyli możliwość przejścia do tego linku. Aby to zrobić, wywołaj e.preventDefault() w zdarzeniu dragover. Inną dobrą praktyką jest zwracanie false w tym samym handlerze.
Użyj obsługi zdarzeń dragenter, aby przełączać klasy, a nie przeciągać. Jeśli używasz dragover, klasa CSS jest przełączana wielokrotnie, ponieważ przeciąganie zdarzeń ciągle się uruchamia, gdy kolumna zawiesuje się w miejscu. W końcu spowoduje to, że renderer przeglądarki wykona mnóstwo niepotrzebnej pracy. Najlepiej zawsze ograniczać przeciąganie do minimum. Jeśli z jakiegoś powodu musisz używać zdarzeń dragover, rozważ ograniczenie lub usunięcie słuchaczy zdarzeń.
Zakończ umiejscowienie
Aby obsłużyć faktyczne rozmieszczenie, dodaj nasłuchiwacz zdarzeń dla zdarzenia drop. W drop-handlerze musisz zablokować domyślne ustawienie przeglądarki, które zwykle jest jakimś irytującym przekierowaniem. e.stopPropagation() może być wywołany, aby zapobiec wywołaniu DOM przez zdarzenie.
Upewnij się, że nowy handler jest zarejestrowany w drugim handlerze:
Jeśli uruchomisz kod w tym momencie, projekt nie zostanie umieszczony w nowym miejscu. Aby to osiągnąć, musisz użyć obiektu DataTransfer.
To właśnie własność dataTransfer to miejsce, gdzie dzieją się wszystkie cuda DnD. Zapisuje fragmenty danych przesłane podczas operacji przeciągania. dataTransfer jest ustawiany w zdarzeniu dragstart i jest odczytywany/przetwarzany w zdarzeniu drop. Wywołaj e.dataTransfer.setData(mimeType, dataPayload), aby ustawić typ MIME i ładunek danych obiektu.
W poniższym przykładzie pozwolimy użytkownikom na zmianę kolejności kolumn. Aby to zrobić, najpierw musisz zapisać HTML elementu źródłowego na początku przeciągania:
Zajmij się położeniem kolumn w zdarzeniu drop, ustaw HTML kolumny źródłowej na HTML kolumny docelowej, w której jest umieszczona, najpierw sprawdź, czy kolumna docelowa przeciągnięta i upuszczona przez użytkownika jest taka sama jak kolumna źródłowa.
Więcej właściwości oporu
Obiekt dataTransfer udostępnia właściwości, które służą do dostarczania wizualnej informacji zwrotnej użytkownikowi podczas procesu przeciągania. Te właściwości mogą być również wykorzystywane do kontrolowania, jak każdy cel rozmieszczenia reaguje na określone typy danych.
- dataTransfer.effectAllowed ogranicza "typ dragu", jaki użytkownik może wykonać na danym elemencie. Jest używany w modelu obsługi przeciągnij i upuść do inicjalizacji efektu spadania podczas zdarzeń dragenter i dragover. Tę właściwość można ustawić na następujące wartości: none, copy, copyLink, copyMove, link, linkMove, move, all oraz uninitialized.
- dataTransfer.dropEffect kontroluje informacje zwrotne przekazywane użytkownikowi podczas zdarzeń dragenter i dragover. Gdy użytkownik najedzie na element docelowy, kursor przeglądarki wskaże rodzaj wykonania akcji (np. kopiowanie, przesunięcie itp.). Efekt może być jedną z następujących wartości: brak, kopiuj, linkuj, przesuwaj.
- e.dataTransfer.setDragImage(imgElement, x, y) oznacza, że domyślna informacja zwrotna "ghost image" przeglądarki nie jest używana, a zamiast tego dostępna jest opcja ustawienia ikony przeciągania.
Przesyłaj pliki przez przeciąganie i upuszczanie
Poniższy prosty przykład wykorzystuje kolumnę jako źródło przeciągania i cel przeciągania. Może to być widoczne w interfejsie użytkownika, gdy użytkownik jest proszony o przestawianie przedmiotów. W niektórych przypadkach przeciąganie celu i przeciąganie źródła może się różnić, na przykład w interfejsie, gdzie użytkownik musi wybrać obraz jako główny obraz produktu, przeciągając wybrany obraz na cel.
Przeciąganie i upuść jest często używane, aby umożliwić użytkownikom przeciąganie elementów z pulpitu do aplikacji. Główna różnica to drop handler. Bez użycia dataTransfer.getData() do dostępu do pliku, dane pliku zostaną uwzględnione w właściwości dataTransfer.files:
Oryginalny link:Logowanie do linku jest widoczne.
|
Opublikowano 2022-4-26 10:30:50
|
|
|
|
Opublikowano 2022-4-26 21:27:25
|
