Jak korzystać z przeciągania i upuszczania HTML5

Przez długi czas istniały funkcje JavaScript, które pozwalają nam tworzyć interfejsy przeciągania i upuszczania, ale żadna z tych implementacji nie była natywna dla przeglądarki.

W HTML5 mamy natywną metodę tworzenia interfejsów przeciągania i upuszczania (z niewielką pomocą JavaScript).

Zamierzam Cię poinformować, jak to osiągnąć ...

Obsługa przeglądarki

Chciałbym usunąć te przeszkody zanim przejdziemy do przodu: obecnie funkcja przeciągania i upuszczania w HTML5 jest obsługiwana przez wszystkie główne przeglądarki komputerów stacjonarnych (w tym IE (nawet IE 5.5 ma częściowe wsparcie)), ale obecnie nie jest obsługiwana przez żadną popularną wersję mobilną przeglądarki.

Przeciągnij i upuść zdarzenia

Na każdym etapie operacji przeciągania i upuszczania uruchamiane jest inne zdarzenie, aby przeglądarka znała kod JavaScript do wykonania; wydarzenia to:

dragStart: uruchamia się, gdy użytkownik zaczyna przeciągać element.
dragEnter: uruchamia się, gdy przeciągany element jest najpierw przeciągany nad elementem docelowym.
dragOver: uruchamia się, gdy mysz zostanie przesunięta nad elementem podczas przeciągania.
dragLeave: uruchomiony, jeśli kursor użytkownika opuszcza element podczas przeciągania.
drag: strzela za każdym razem, gdy poruszamy myszą podczas przeciągania naszego elementu.
drop: uruchomiony, gdy wykonywany jest faktyczny zrzut.
dragEnd: uruchamia się, gdy użytkownik zwolni mysz podczas przeciągania obiektu.

Dzięki tym wszystkim detektorom zdarzeń masz dużą kontrolę nad tym, jak działa twój interfejs i jak on działa w różnych okolicznościach.

Obiekt dataTransfer

Tu właśnie pojawia się cała magia przeciągania i upuszczania; ten obiekt przechowuje dane, które zostały wysłane przez operację przeciągania. Dane można ustawiać i pobierać na różne sposoby, z których najważniejszymi są:

dataTransfer.effectAllowed = value: zwraca typy dozwolonych akcji, możliwe wartości to none, copy, copyLink, copyMove, link, linkMove, move, all i uninitialized.
dataTransfer.setData (format, dane): dodaje określone dane i ich format.
dataTransfer.clearData (format): czyści wszystkie dane dla określonego formatu.
dataTransfer.setDragImage (element, x, y): ustawia obraz, który chcesz przeciągnąć, wartości x i y określają miejsce, w którym powinien znajdować się kursor myszy (0, 0 umieści go w lewym górnym rogu).
data = dataTransfer.getData (format): Jak sama nazwa wskazuje, zwraca dane dostępne dla określonego formatu.

Tworzenie przykładu przeciągania i upuszczania

Teraz zaczniemy tworzyć nasze prosty przykład przeciągania i upuszczania, widać, że mamy dwa małe divy i większy, możemy przeciągać i upuszczać małe wewnątrz dużego, a my możemy je nawet cofnąć.

Przeciąganie obiektu

Pierwszą rzeczą, którą musimy zrobić, to stworzyć nasz HTML. Elementy div można przeciągać za pomocą atrybutu przeciągania, tak jak poniżej:

draggable="true">

Kiedy to zrobimy, musimy zdefiniować funkcję javascript, która będzie działać, gdy zaczniemy przeciągać ten element:

function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));   ev.dataTransfer.setDragImage(ev.target,100,100);return true;}

W tym kodzie deklarujemy najpierw, jaki rodzaj efektu dopuszczamy w operacji i ustawiamy go, aby się poruszał, w drugim wierszu ustawiamy dane dla operacji, w tym przypadku typem jest Tekst, a wartość jest identyfikatorem elementu przeciągamy. Następnie używamy metody setDragImage , aby ustawić to, co będziemy przeciągać, a następnie gdzie będzie kursor podczas przeciągania, a ponieważ kostki mają 200 na 200 pikseli, umieściłem je w samym środku. Wreszcie zwracamy prawdę.

Upuszczenie obiektu

Aby element zaakceptował drop, musi wysłuchać 3 różnych zdarzeń: dragEnter, dragOver, a także zdarzenia drop , dodajmy to do naszego html w div z identyfikatorem big:

Po dodaniu detektorów zdarzeń musimy utworzyć te funkcje, które zaczniemy od zdarzeń dragenter i dragover:

function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}

W pierwszej funkcji definiujemy, co chcemy zrobić, gdy element, który przeciągamy, dociera do elementu, do którego ma zostać wpuszczony, w tym przypadku tylko zapobiegamy domyślnemu zachowaniu przeglądarki, ale można zrobić dowolną liczbę rzeczy, takich jak zmiana tło lub dodaj tekst, aby wskazać, że użytkownik przeciąga kursor do właściwego obszaru i przy użyciu zdarzenia dragleave możesz cofnąć wprowadzone zmiany. Następnie w funkcji dragOver po prostu zapobiegamy domyślnemu dopuszczeniu kropli.

W następnej części definiujemy funkcję, kiedy faktycznie upuszczamy element na pożądany cel:

function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}

W tej ostatniej części najpierw ustawiamy zmienną o nazwie dane, w której otrzymujemy wszystkie dane dostępne dla formatu tekstowego, a następnie dodajemy dane (które będą elementem, który przeciągamy) do elementu div, w którym chcemy upuścić element. W końcu niektóre ostatnie poprawki, takie jak zatrzymanie propagacji, a także zwrot fałszywy.

Przekierowanie sekcji do celu upuszczenia

Kontrola demo , widzimy, że upewniliśmy się również, że dwa elementy div można przeciągnąć z powrotem do ich pierwotnej lokalizacji. Na szczęście dodanie kolejnej kropli może być prostsze niż myślisz; ponieważ funkcje są już na miejscu, wystarczy dodać detektory zdarzeń, jak na przykład:

I to wszystko, czego potrzebujemy, aby umożliwić przeciąganie elementów div do pierwotnego miejsca.

Wniosek

Istnieje wiele aplikacji typu "przeciągnij i upuść" zbudowanych przy użyciu bibliotek JavaScript i często łatwiej jest z nich korzystać. Mam jednak nadzieję, że w tej technice HTML5 i JavaScript widzisz przyszły potencjał natywnego rozwiązania.

Czy zbudowałeś interfejs przeciągania i upuszczania? W jaki sposób natywny HTML5 porównuje się do czystych rozwiązań JavaScript? Daj nam znać w komentarzach.

Wyróżniony obraz / miniatura, upuść obraz za pomocą photofilde.

projekt ux