TL; DR – Interfejs API przeciągania i upuszczania HTML5 umożliwia chwyć kursorem obiekt HTML i przeciągnij go w inne miejsce.
Co możesz przeciągać i upuszczać w HTML5?
HTML5 umożliwia przeciąganie dowolnego elementu, umożliwiając podniesienie go kursorem i przeciągnięcie w inne miejsce, które jest zdefiniowane jako element możliwy do upuszczenia. W poniższym przykładzie spróbuj przeciągnąć obraz do kwadratu:
Ta funkcjonalność upraszcza doświadczenie użytkownika, a nawet umożliwia tworzenie prostych gier online (np. Można przeciągać i upuszczać wirtualne szachy). Podczas przeciągania elementu jego przezroczysta replika przesuwa się wraz z kursorem, dopóki nie upuścisz go, puszczając przycisk myszy.
Z technicznego punktu widzenia Drag and Drop to JavaScript API dodany do HTML5. Dlatego ważne jest, aby mieć przynajmniej podstawową wiedzę o skryptach, aby móc pracować z tą funkcją.
Zdarzenia dotyczące przeciągania i upuszczania HTML5
W poniższej tabeli zobaczysz wszystkie zdarzenia związane z funkcją Przeciągnij i upuść:
| Wydarzenie | Wyjaśnienie |
|---|---|
| przeciągnij | Kursor porusza się podczas przeciągania elementu |
| upuść | Przeciąganie kończy się |
| dragstart | Kursor podnosi element i zaczyna przeciągać |
| dragend | Przycisk myszy zostaje zwolniony, upuszczając element |
| dragenter | Kursor przechodzi do elementu docelowego |
| dragleave | Kursor opuszcza element docelowy |
| przeciągnij | Kursor przesuwa się nad elementem docelowym |
Wyjaśnienie krok po kroku metody przeciągnij i upuść
Kodowanie przeciągnij i upuść HTML5 wydaje się na pierwszy rzut oka dość skomplikowane, ponieważ zawiera skrypty w JS. Jednak przestudiujmy każdą część procesu, aby ułatwić zrozumienie.
Elementy do przeciągania
Najpierw upewnij się, że element, który chcesz przeciągnąć, ma Zastosowano atrybut HTML5 draggable i ustawiono jego wartość na true:
Przeciąganie
Następnie określ, co ma się stać po przeciągnięciu obiektu. Możesz to zrobić, wywołując moduł obsługi zdarzenia dla zdarzenia dragstart i definiujący funkcję do wykonania.
Wartość i typ danych przeciągniętych danych muszą być ustawione przez dataTransfer.setData() metoda:
Upuszczanie
Przeciągalne dane HTML5 są określane przez dołączenie modułu obsługi zdarzenia do zdarzenia dragover.
Elementów i danych nie można domyślnie upuszczane w innych elementach. Oznacza to, że musisz zatrzymać elementy domyślne zachowanie przy użyciu metody event.preventDefault():
Zdarzenie drop występuje, gdy upuszczane są przeciągane dane HTML5. Jest wywoływany przez moduł obsługi zdarzeń ondrop:
Kod końcowy: przykład
Zasadniczo kod jest potrzebny, aby móc wykonaj cztery kroki:
- Zapobiegaj domyślnej akcji przeglądarki internetowej związanej z danymi, wywołując
preventDefault() - Pobierz dane za pomocą metody
dataTransfer.getData() - Umieść przeciągnięty element na elemencie upuszczania
Zobaczmy, jak to działa w przykład poniżej:
Przeciągnij i upuść HTML5: przydatne wskazówki
- Możesz przeciągać różne typy elementów, w tym między innymi pliki, linki, obrazy i tekst.
- Możesz także przeciągnąć wiele elementów jednocześnie. Jednak zaleca się, aby wszystkie były w tym samym formacie dla zachowania spójności.
- Elementy formularza, które akceptują dane wejściowe użytkownika, mogą być domyślnie obszarami do upuszczania.