Przeciągnij i upuść JavaScript

Podsumowanie: w tym samouczku dowiesz się o API JavaScript do przeciągania i upuszczania.

Wprowadzenie do JavaScript API Drag and Drop

HTML5 formalnie wprowadził specyfikację przeciągania i upuszczania. Większość nowoczesnych przeglądarek internetowych ma zaimplementowane natywne przeciąganie i upuszczanie na podstawie specyfikacji HTML5.

Domyślnie można przeciągać tylko obrazy i tekst. Aby przeciągnąć obraz, po prostu przytrzymaj przycisk myszy, a następnie przesuń go. Aby przeciągnąć tekst, musisz podświetlić tekst i przeciągnąć go w taki sam sposób, jak przeciągasz obraz.

HTML5 określa, że prawie wszystkie elementy można przeciągać. Aby element był możliwy do przeciągania, dodaj właściwość draggable z wartością true do jego tagu HTML. Na przykład:

Code language: HTML, XML (xml)

Zdarzenia na elementach do przeciągania

Podczas przeciągania elementu zdarzenia te uruchamiają się w następującej kolejności:

• dragstart
• drag
• dragend

Gdy przytrzymasz przycisk myszy i zaczniesz ją przesuwać, zdarzenie dragstart jest uruchamiane na elemencie, który można przeciągać że przeciągasz. Kursor zmieni się w symbol bez upuszczania (okrąg z przekreśloną linią), aby wskazać, że nie możesz upuścić elementu na siebie.

Po dragstart zdarzenie jest uruchamiane, zdarzenie drag jest uruchamiane wielokrotnie, o ile przeciągasz element.

I dragend uruchamia się zdarzenie kiedy przestaniesz przeciągać element.

Celem wszystkich zdarzeń (e.target) jest przeciągany element.

Domyślnie , przeglądarka nie zmienia wyglądu przeciągniętego elementu. Dlatego możesz dostosować jego wygląd na podstawie własnych preferencji.

Zdarzenia w miejscach docelowych upuszczania

Po przeciągnięciu elementu na prawidłowy cel upuszczania zdarzenia te uruchamiają się w następującej kolejności:

• dragenter
• dragover
• dragleave lub drop

dragenter uruchamia się tak szybko podczas przeciągania elementu nad miejsce docelowe upuszczania.

Po wywołaniu zdarzenia dragenter, zdarzenie dragover jest uruchamiane wielokrotnie tak długo, jak przeciągasz element w granicach celu upuszczania.

Gdy przeciągasz element poza granicę celu upuszczania, dragover zdarzenie przestaje działać, a dragleave zdarzenie zostaje uruchomione.

W przypadku upuszczenia elementu w miejscu docelowym drop zdarzenie jest uruchamiane zamiast zdarzenia dragleave.

Cel ( ) z dragenter, dragover, dragleave i drop są elementami docelowymi upuszczania.

Prawidłowy cel upuszczania

Prawie wszystkie elementy obsługują zdarzenia docelowe upuszczania (dragenter, dragover, dragleave i drop). Jednak domyślnie nie zezwalają na upuszczanie.

Jeśli upuścisz element nad celem upuszczenia, który nie pozwala na upuszczenie, wygrywa zdarzenie drop Nie uruchamia się.

Aby zmienić element w prawidłowy cel upuszczania, możesz zastąpić domyślne zachowanie zarówno dragenter, jak i dragover przez wywołanie metody event.preventDefault() w odpowiednich programach obsługi zdarzeń. (Zobacz sekcję z przykładami, aby uzyskać więcej informacji)

Transfer danych przy użyciu obiektu dataTransfer

Aby przenieść dane metodą przeciągnij i upuść, użyj funkcji dataTransfer.

Obiekt dataTransfer jest właściwością zdarzenia. Umożliwia przesyłanie danych z przeciągniętego elementu do miejsca docelowego.

Obiekt dataTransfer ma dwie metody: setData() i getData().

setData() pozwala ustawić dane operacji przeciągania na określony format i dane :

Code language: CSS (css)

Może to być text/plain lub text/uri-list. Dane mogą być łańcuchem reprezentującym dane do dodania do obiektu przeciągania.

Metoda getData() pobiera dane przeciągania przechowywane przez setData().

getData() akceptuje jeden argument:

Może mieć format text/plain lub text/uri-list. getData() zwraca ciąg przechowywany przez metodę setData() lub pusty ciąg, jeśli operacja przeciągania nie obejmuje danych.

Przykład przeciągania i upuszczania JavaScript

Opracujemy następującą prostą aplikację typu „przeciągnij i upuść”, aby zademonstrować interfejs API przeciągania i upuszczania JavaScript:

Utwórz struktura projektu

Najpierw utwórz nowy folder o nazwie drag-n-drop-basics. W tym folderze utwórz dwa podfoldery o nazwach css i js.

Po drugie, utwórz nowy plik o nazwie app.js w folderze js, style.css w css i index.html w folderze drag-n-drop-basics.

Po trzecie, umieść link do style.css i tag skryptu, który prowadzi do app.js w pliku index.html w następujący sposób:

Zbuduj plik index.html

Umieść następujący kod w pliku index.html:

W tym pliku index.html, użyliśmy elementu .container, aby wyrównać nagłówek i element drop-targets.

Wewnątrz elementu drop-target, umieścił trzy elementy div z tą samą klasą box. W pierwszym polu umieścimy kolejny element div z klasą item.

Jeśli otworzysz index.html i spróbuj przeciągnąć żółte pole, zobaczysz kursor wskazujący, że nie możesz przeciągać:

Aby umożliwić przeciąganie elementu, dodaj właściwość draggable o wartości true do swojego tagu HTML w następujący sposób:

Code language: JavaScript (javascript)

Teraz, jeśli zapiszesz index.html, otwórz go w przeglądarce znowu zobaczysz, że możesz przeciągnąć element item w ten sposób:

Obsługa zdarzeń w elemencie przeciągalnym

Plik style.css ma .hide klasa, która ukrywa element:

Code language: CSS (css)

W pliku app.js dodajesz następujący kod:

W jaki sposób t działa:

• Najpierw wybierz element do przeciągania za pomocą querySelector().
• Po drugie, dołącz dragstart obsługi zdarzeń do elementu przeciągalnego.
• Po trzecie, zdefiniuj funkcję dragStart() do obsługi dragstart zdarzenie.

Jeśli otworzysz plik index.html i zaczniesz przeciągać element do przeciągania, zobaczysz komunikat drag starts... w konsoli.

W module obsługi zdarzeń dragStart, musisz zapisać id elementu, który można przeciągać. I musisz to ukryć:

Jeśli przeciągniesz element, zobaczysz, że znika on po rozpoczęciu przeciągania.

Aby rozwiązać ten problem, użyj setTimeout():

Teraz możesz przeciągnąć element do przeciągania z jego pierwotnej pozycji:

Obsługa zdarzeń w miejscach docelowych upuszczania

Plik style.css ma również klasę CSS o nazwie .drag-over, który zmienia styl obramowania celu upuszczenia na przerywany i czerwony:

Code language: CSS (css)

W pliku app.js potrzebujesz aby wybrać elementy docelowe upuszczania i obsłużyć dragenter, dragover, dragleave i drop zdarzenia tych elementów:

Styl obramowania celu upuszczenia powinien się zmienić, gdy dragenter i dragover wystąpi zdarzenie. Powinien przywrócić styl po wystąpieniu zdarzenia dragleave i drop.

Aby to zrobić, dodaj i usuń klasę drag-over do drop celu w następujący sposób:

Teraz, jeśli przeciągniesz element do przeciągania do innej kropli docelowy, zobaczysz, że krawędź celu upuszczenia zmienia się, jak pokazano na poniższym obrazku:

Aby cel upuszczenia był prawidłowy, musisz zadzwonić pod numer event.preventDefault() w dragenter i dragover programy obsługi zdarzeń, takie jak ta:

Jeśli tego nie zrobisz, zdarzenie drop nigdy nie odpalić, ponieważ element div nie jest domyślnie prawidłowym celem upuszczania.

Jeśli przeciągniesz element do przeciągania do miejsca docelowego, zobaczysz, że kursor zmiany wskazujące na możliwość usunięcia elementu:

Teraz, jeśli upuścisz element item, zobaczysz, że znika on natychmiast.

Aby rozwiązać ten problem musisz dodać obsługę zdarzenia drop.

• Najpierw pobierz id elementu do przeciągania za pomocą metody getData() z dataTransfer obiekt.
• Po drugie, dołącz element do przeciągania jako element podrzędny elementu docelowego upuszczania.
• Po trzecie, usuń hide z elementu draggable.

Poniższy kod przedstawia kompletną drop moduł obsługi zdarzeń:

Jeśli teraz przeciągniesz i upuścisz element do przeciągania, powinien on działać zgodnie z oczekiwaniami.

Poniżej przedstawiono kompletny plik app.js:

A oto link do demo.

Podsumowanie

• Dodaj właściwość draggable o wartości true do elementu, aby można go było przeciągać.
• dragstart, drag i dragend zdarzenia uruchamiają się na elemencie przeciągalnym.
• dragenter, dragover, lub drop uruchamiają się w miejscu docelowym.
• Zadzwoń pod numer event.preventDefault() na dragenter i dragover programy obsługi zdarzeń, aby uczynić z elementu prawidłowy cel upuszczania.
• Użyj event.dataTransfer z metodami setData() i getData() do przesyłania danych w operacji przeciągania i upuszczania.