Korzystanie z HTML5 Drag and Drop API

HTML5 Drag and Drop (DnD) API oznacza, że możemy uczynić przeciągnij prawie każdy element na naszej stronie. W tym poście wyjaśnimy podstawy Drag and Drop i upuść.

Tworzenie treści do przeciągania #

Warto zauważyć, że w większości przeglądarek zaznaczenia tekstu, obrazy i linki są domyślnie przeciągane. Na przykład, jeśli przeciągniesz Logo Google w wyszukiwarce Google spowoduje wyświetlenie obrazu-ducha. Obraz można następnie upuścić na pasku adresu, elemencie <input type="file" />, a nawet na pulpicie. Aby umożliwić przeciąganie innych typów treści musisz użyć interfejsów API HTML5 DnD.

Aby ustawić obiekt do przeciągania, ustaw draggable=true na tym elemencie. Po prostu prawie wszystko można przeciągać, obrazy, pliki , linki, pliki lub dowolne znaczniki na Twojej stronie.

W naszym przykładzie tworzymy interfejs do zmiany układu niektórych kolumn, które zostały rozmieszczone za pomocą siatki CSS. Podstawowe znaczniki moich kolumn wyglądają tak to, przy czym każda kolumna ma

atrybut ustawiony natrue.

Oto CSS dla mojego kontenera i elementów pudełka. Pamiętaj, że jedyny CSS związaną z funkcjonalnością DnD jest właściwość cursor: move. Pozostała część kodu kontroluje tylko układ i styl elementów kontenera i pudełka.

W tym miejscu stwierdzisz, że możesz przeciągać elementy, ale nic więcej się nie stanie. Aby dodać funkcjonalność DnD, musimy użyć JavaScript API.

Nasłuchiwanie przeciągania zdarzeń #

Jest kilka różnych zdarzeń, do których można dołączyć w celu monitorowania całego procesu przeciągania i upuszczania.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

Aby obsłużyć przepływ DnD, potrzebujesz pewnego rodzaju elementu źródłowego (z którego pochodzi przeciągnięcie), pa danych yload (to, co próbujesz upuścić) i cel (obszar, w którym chcesz upuścić). Elementem źródłowym może być obraz, lista, łącze, obiekt pliku, blok HTML itp. Celem jest strefa upuszczania (lub zestaw stref upuszczania), który akceptuje dane, które użytkownik próbuje upuścić. Należy pamiętać, że nie wszystkie elementy mogą być celem, na przykład obraz nie może być celem.

Rozpoczęcie i zakończenie sekwencja przeciągania i upuszczania #

Po zdefiniowaniu atrybutów draggable="true" w treści, dołącz moduł obsługi zdarzeń dragstart aby rozpocząć sekwencję DnD dla każdej kolumny.

Ten kod ustawi krycie kolumny na 40%, gdy użytkownik zacznie ją przeciągać, a następnie zwróci je na 100% po zakończeniu przeciągania zdarzenia.

Wynik można zobaczyć w poniższym demo Glitch. Przeciągnij element, a stanie się on nieprzezroczysty. Ponieważ celem zdarzenia dragstart jest element źródłowy, ustawienie this.style.opacity na 40% daje użytkownikowi wizualna informacja zwrotna, że element jest aktualnie przenoszonym zaznaczeniem. Po upuszczeniu elementu, mimo że funkcja upuszczania nie jest dostępna, element źródłowy powraca do 100% krycia.

Dodaj dodatkowe wizualne wskazówki za pomocą dragenter, dragover i dragleave #

Aby pomóc użytkownikowi zrozumieć, jak korzystać z interfejsu, użyj dragenter, dragover i dragleave do obsługi zdarzeń. W tym przykładzie kolumny są nie tylko możliwymi do przeciągania, ale także celami upuszczania. Pomóż użytkownikowi aby to zrozumieć, zaznaczając ramkę przerywaną, gdy trzymają przeciągnięty element nad kolumną. Na przykład w swoim CSS możesz utworzyć klasę over reprezentującą elementy, które są celami upuszczania:

Następnie w Twoim J avaScript skonfiguruj programy obsługi zdarzeń, dodaj klasę over, gdy kolumna jest przeciągnięta, i usuń ją, gdy wyjdziemy. W dragend obsługi, upewniamy się również, że usunęliśmy klasy na końcu przeciągania.

W tym kodzie jest kilka punktów wartych omówienia :

• W przypadku przeciągania czegoś takiego jak link, musisz zapobiec domyślnemu zachowaniu przeglądarki, czyli przechodzeniu do tego linku. Aby to zrobić, zadzwoń pod numer e.preventDefault() w zdarzeniu dragover. Inną dobrą praktyką jest zwrócenie false w tym samym module obsługi.
• Moduł obsługi zdarzeń dragenter służy do przełączania klasy over zamiast dragover .Jeśli użyjesz dragover, klasa CSS zostanie przełączona wiele razy, ponieważ zdarzenie dragover będzie nadal uruchamiane po najechaniu kursorem na kolumnę. Ostatecznie, to spowodowałoby renderer przeglądarki do wykonywania dużej ilości niepotrzebnej pracy. Utrzymywanie przerysowań do minimum jest zawsze dobrym pomysłem.Jeśli potrzebujesz do czegoś użyć zdarzenia dragover, rozważ ograniczenie lub usunięcie detektora zdarzeń.

Zakończenie upuszczania #

Aby przetworzyć faktyczne upuszczenie, dodaj detektor zdarzeń dla zdarzenia drop. W module obsługi drop „będziesz musiał zapobiec domyślne zachowanie przeglądarki w przypadku upuszczeń, które jest zwykle pewnym irytującym przekierowaniem. Możesz zapobiec przepełnieniu DOM przez zdarzenie, wywołując e.stopPropagation().

Jeśli uruchomisz kod w tym momencie, element nie zostanie przeniesiony do nowej lokalizacji. Aby to osiągnąć, musisz użyć DataTransfer obiekt.

Właściwość dataTransfer jest miejscem, w którym dzieje się cała magia DnD. Przechowuje fragment danych wysłany podczas operacji przeciągania. dataTransfer jest ustawiana w zdarzeniu dragstart i odczytywana / obsługiwana w zdarzeniu upuszczenia. Wywołanie e.dataTransfer.setData(mimeType, dataPayload) pozwala ustawić obiekt „s Typ MIME i ładunek danych.

W tym przykładzie pozwolimy użytkownikom zmienić kolejność kolumn. Aby to zrobić, najpierw musisz zapisać kod HTML elementu źródłowego, początek:

W przetwarzanym zdarzeniu drop upuść kolumnę, ustawiając kod HTML kolumny źródłowej na kod HTML kolumny docelowej, na którą upuściłeś, najpierw sprawdzając, czy użytkownik nie upuszcza z powrotem do tej samej kolumny, z której przeciągnął.

Możesz zobaczyć wynik w poniższym demo. Przeciągnij i zwolnij kolumnę A na górze kolumny B i zwróć uwagę, jak zmieniają się miejsca:

Więcej przeciąganie właściwości #

Obiekt dataTransfer udostępnia właściwości, aby zapewnić użytkownikowi wizualną informację zwrotną podczas procesu przeciągania. Właściwości te mogą również służyć do kontrolowania sposobu, w jaki każdy cel upuszczania odpowiada na określony typ danych.

• dataTransfer.effectAllowed ogranicz jaki „typ przeciągania” może wykonać użytkownik na elemencie. Jest on używany w modelu przetwarzania metodą „przeciągnij i upuść” do zainicjowania dropEffect podczas i dragover. Właściwość można ustawić na następujące wartości: none, copy, copyLink, copyMove, link, linkMove, move, all i uninitialized.
• dataTransfer.dropEffect kontroluje opinie, które użytkownik otrzymuje podczas dragenter i dragover events. Gdy użytkownik najedzie na element docelowy, kursor przeglądarki wskaże, jaki typ operacji będzie miał miejsce (np. kopia, ruch itp.). Efekt może przyjąć jedną z następujących wartości: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) oznacza, że zamiast używać przeglądarki ” jako domyślny „obraz-widmo”, możesz opcjonalnie ustawić ikonę przeciągania.

Przesyłanie pliku metodą przeciągania i upuszczania #

W tym prostym przykładzie kolumna jest źródło przeciągania i cel przeciągania Może to być widoczne w interfejsie użytkownika, w którym użytkownik jest proszony o zmianę kolejności elementów W niektórych sytuacjach cel przeciągania i źródło mogą być różne, na przykład w interfejsie, w którym użytkownik musi wybrać jeden obraz jako główny obraz produktu poprzez przeciągnięcie wybranego obrazu do celu.

Przeciąganie i upuszczanie jest często używane, aby umożliwić użytkownikom przeciąganie elementów z ich pulpitu do aplikacji. Główna różnica polega na drop handler. Zamiast używać dataTransfer.getData() do uzyskiwania dostępu do plików, ich danych wi Zostanie zawarta we właściwości dataTransfer.files:

Więcej informacji na ten temat można znaleźć w sekcji Niestandardowe przeciąganie i upuszczanie.