Wprowadzenie
Przeciąganie i upuszczanie to typowa interakcja użytkownika, którą można znaleźć w wielu graficznych interfejsach użytkownika.
Istnieją już istniejące biblioteki JavaScript umożliwiające dodawanie funkcji przeciągania i upuszczania do aplikacji. Jednak mogą zaistnieć sytuacje, w których biblioteka nie jest dostępna lub wprowadza narzut lub zależność, których projekt nie potrzebuje. W takich sytuacjach znajomość interfejsów API dostępnych w nowoczesnych przeglądarkach internetowych może zaoferować alternatywne rozwiązania.
Interfejs HTML Drag and Drop API opiera się na modelu zdarzeń DOM, aby uzyskać informacje o tym, co jest przeciągane lub upuszczane i aktualizować ten element poprzez przeciąganie lub upuszczanie. Dzięki programom obsługi zdarzeń JavaScript możesz przekształcić dowolny element w element do przeciągania lub element, do którego można upuścić.
W tym samouczku utworzymy przykład przeciągania i upuszczania przy użyciu metody przeciągnij i upuść HTML API z prostym JavaScriptem do obsługi zdarzeń.
Wymagania wstępne
Aby ukończyć ten samouczek, będziesz potrzebować:
- Nowoczesna przeglądarka internetowa obsługująca interfejs Drag and Drop API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).
Krok 1 – Tworzenie projektu i początkowe znaczniki
Nasz projekt będzie składał się z kontenera z dwoma typami elementów podrzędnych:
- Elementy podrzędne, które możesz przeciągać
- Elementy podrzędne, do których można upuszczać elementy
Najpierw otwórz okno terminala i utwórz nowy katalog projektu:
Następnie przejdź do tego katalogu:
Następnie utwórz plik index.html w tym katalogu:
Następnie dodaj standardowy kod dla strony internetowej HTML:
I pomiędzy <body> tagi dodają draggable element i dropzone (spadek celu):
Zapisz i zamknij plik. Następnie utwórz plik style.css:
Następnie dodaj style dla elementów w naszym index.html:
Doda to trochę formatowania do aplikacji. Teraz możesz wyświetlić index.html w przeglądarce i zaobserwować, że w ten sposób powstaje draggable <div> i a dropzone <div>.
Następnie wyraźnie ustawimy pierwszy element <div> jako możliwy do przeciągania, dodając atrybut draggable:
Zapisz i zamknij plik.
Na koniec ponownie wyświetl index.html w przeglądarce. Jeśli klikniemy draggable <div> i przeciągniemy go po ekranie, powinno być wizualne wskazanie, że się porusza.
Domyślna wartość atrybutu draggable to auto. Oznacza to, że możliwość przeciągania elementu zostanie określona przez domyślne zachowanie przeglądarki. Zwykle oznacza to, że zaznaczenia tekstu, obrazy i linki można przeciągać bez określania draggable="true".
Masz teraz plik HTML z elementem do przeciągania. Przejdziemy do dodawania modułów obsługi onevent.
Krok 2 – Obsługa zdarzeń typu „przeciągnij i upuść” za pomocą JavaScript
Obecnie, jeśli zwolnij przycisk myszy podczas przeciągania elementu, który można przeciągać, nic się nie dzieje. Aby wywołać akcję przeciągania lub upuszczania elementów DOM, będziemy musieli użyć interfejsu API Drag and Drop:
-
ondragstart: ten program obsługi zdarzenia zostaną dołączone do naszego elementudraggablei uruchomione, gdy wystąpi zdarzeniedragstart. -
ondragover: ta procedura obsługi zdarzeń zostanie dołączona do naszego elementudropzonei uruchomiona, gdy wystąpi zdarzeniedragover. -
ondrop: ta procedura obsługi zdarzeń zostanie również dołączona do naszego elementudropzonei zostanie uruchomiona, gdydropzdarzenie.
Uwaga: w sumie jest osiem programów obsługi zdarzeń: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart i ondrop. W naszym przykładzie nie będziemy potrzebować ich wszystkich.
Najpierw odwołajmy się do nowego pliku https://www.digitalocean.com/community/tutorials/script.js w naszym index.html:
Następnie utwórz nowy https://www.digitalocean.com/community/tutorials/script.js plik:
Obiekt DataTransfer będzie śledzić informacje związane z bieżącym przeciąganiem. Aby zaktualizować nasz element podczas przeciągania i upuszczania, musimy uzyskać bezpośredni dostęp do obiektu DataTransfer.Aby to zrobić, możemy wybrać właściwość dataTransfer z elementu DOM DragEvent.
Uwaga: DataTransfer obiekt może technicznie śledzić informacje o wielu elementach, które są przeciągane w tym samym czasie. W naszym przykładzie skoncentrujemy się na przeciągnięciu jednego elementu.
Metoda dataTransfer obiektu setData obiektu setData można użyć do ustawienia informacji o stanie przeciągania dla aktualnie przeciąganego elementu. Przyjmuje dwa parametry:
- ciąg, który deklaruje format drugiego parametru
- aktualne przesyłane dane
Nasz cel polega na przeniesieniu naszego elementu draggable do nowego elementu nadrzędnego. Musimy mieć możliwość wybrania naszego elementu draggable z unikalnym id. Możemy ustawić id przeciągniętego elementu za pomocą metody setData, aby można było użyć go później.
wróć do naszego pliku https://www.digitalocean.com/community/tutorials/script.js i utwórz nową funkcję do używania setData:
Uwaga: podobno Internet Explorer od 9 do 11 ma problemy z używaniem "text/plain". Format musi być "text" dla tej przeglądarki.
Aby zaktualizować styl CSS przeciągniętego elementu, możemy ponownie uzyskać dostęp do jego stylów za pomocą zdarzenia DOM, ustawianie dowolnych stylów dla currentTarget.
Dodajmy do naszej funkcji i zmieńmy backgroundColor na yellow:
Uwaga: wszystkie style, które zmienisz, będą musiały zostać ponownie ręcznie zaktualizowane po upuszczeniu, jeśli chcesz mieć style tylko do przeciągania. Jeśli zmienisz cokolwiek, gdy zacznie się przeciągać, przeciągnięty element zachowa nowy styl, chyba że zmienisz go z powrotem.
Teraz mamy naszą funkcję JavaScript do rozpoczęcia przeciągania.
Możemy dodać ondragstart do elementu draggable w index.html:
Wyświetl index.html w przeglądarce. Jeśli spróbujesz teraz przeciągnąć element, stylizacja zadeklarowana w naszej funkcji zostanie zastosowana:
Jednak nic się nie stanie kiedy zwolnisz kliknięcie.
Następna procedura obsługi zdarzenia uruchomiona w tej sekwencji to ondragover.
Domyślne zachowanie porzucania niektórych elementów DOM jak <div> w przeglądarkach, zazwyczaj nie akceptuje upuszczania. To zachowanie przechwyci zachowanie, które próbujemy zaimplementować. Aby upewnić się, że otrzymamy pożądane zachowanie po upuszczeniu, zastosujemy preventDefault.
Wróćmy do pliku https://www.digitalocean.com/community/tutorials/script.js i utwórz nową funkcję do użycia preventDefault. Dodaj ten kod na końcu pliku:
Teraz, możemy dodać ondragover do naszego elementu dropzone w index.html:
W tym momencie nadal nie napisaliśmy kodu obsługującego faktyczne usuwanie. Ostatnim programem obsługi zdarzeń uruchomionym w tej sekwencji jest ondrop.
Wróćmy do naszego pliku https://www.digitalocean.com/community/tutorials/script.js i utwórzmy nową funkcję .
Możemy odwołać się do danych, które zapisaliśmy wcześniej, za pomocą metody dataTransfer obiektu setData. Użyjemy metody dataTransfer obiektu getData. Dane, które ustawiliśmy, to id, więc to nam zostanie zwrócone:
Wybierz nasz element draggable z id, który pobraliśmy:
Wybierz nasze dropzone element:
Dołącz nasze draggable do dropzone:
Zresetuj nasz dataTransfer obiekt:
Teraz możemy dodać ondrop do naszego elementu dropzone w index.html:
Gdy to zrobisz, mamy gotową funkcję przeciągnij i upuść. Wyświetl index.html w przeglądarce i przeciągnij element draggable do dropzone.
Nasz przykład obsługuje scenariusz pojedynczego przeciąganego elementu i pojedynczego miejsca docelowego upuszczania. Możesz mieć wiele elementów do przeciągania, wiele obiektów docelowych upuszczania i dostosowywać je za pomocą wszystkich innych programów obsługi zdarzeń interfejsu API Drag and Drop.
Krok 3 – Tworzenie zaawansowanego przykładu z wieloma elementami do przeciągania
Oto jeszcze jeden przykład wykorzystania tego interfejsu API: lista rzeczy do zrobienia z zadaniami do przeciągania, z których można przejść z kolumny "To-do" do kolumny "Done".
Aby utworzyć własną listę rzeczy do zrobienia, dodaj więcej elementów do przeciągania z unikalnymi id s to index.html:
Wyświetl index.html w swoim przeglądarkę i przeciągnij elementy z kolumny Do zrobienia do kolumny Gotowe. Utworzyłeś aplikację do zrobienia i przetestowałeś jej funkcjonalność.
Podsumowanie
W tym artykule utworzyłeś aplikację do wykonania, aby zbadać funkcję przeciągania i upuszczania, czyli dostępne w nowoczesnych przeglądarkach internetowych.
Drag and Drop API zapewnia wiele opcji dostosowywania działań poza przeciąganiem i upuszczaniem. Na przykład możesz zaktualizować styl CSS przeciąganych elementów. Ponadto zamiast przenosić element, możesz skopiować element do przeciągania, aby był replikowany podczas upuszczania.
Pamiętaj, że chociaż wiele przeglądarek internetowych obsługuje tę technologię, możesz nie być w stanie polegać na nim, jeśli Twoi odbiorcy składają się z urządzeń, które nie obsługują tej funkcji.
Aby dowiedzieć się więcej o wszystkim, co możesz upuścić za pomocą interfejsu Drag and Drop API, zapoznaj się z dokumentacją MDN.