Jak korzystać z interfejsu API przeciągania i upuszczania HTML

Przeciąganie i upuszczanie to istotna funkcja usprawniająca interakcję z użytkownikiem i zapewniająca bezproblemową obsługę. Niezależnie od tego, czy chcesz zbudować narzędzie do przesyłania plików, listę z możliwością sortowania, czy interaktywną grę, zrozumienie, jak wykorzystać możliwości tego interfejsu API, jest kluczową umiejętnością, którą warto posiadać w swoim zestawie narzędzi do tworzenia stron internetowych.

Spis treści:

Podstawy przeciągania i upuszczania w HTML

W typowym systemie „przeciągnij i upuść” istnieją dwa typy elementów: pierwszy typ obejmuje elementy, które można przeciągać, które użytkownicy mogą przesuwać myszą, a drugi typ obejmuje elementy, które można upuszczać, które zazwyczaj określają, gdzie użytkownicy mogą umieścić element.

Aby zaimplementować przeciąganie i upuszczanie, musisz poinformować przeglądarkę, które elementy chcesz przeciągać. Aby użytkownik mógł przeciągać element, element ten powinien mieć atrybut HTML umożliwiający przeciąganie ustawiony na wartość true, w następujący sposób:

 <div draggable="true">This element is draggable</div>

Gdy użytkownik rozpoczyna uruchamianie zdarzenia przeciągania, przeglądarka wyświetla domyślny obraz „ducha”, który zazwyczaj dostarcza informacji zwrotnej na temat przeciąganego elementu.

Możesz dostosować ten obraz, dostarczając zamiast tego własny obraz. Aby to zrobić, wybierz przeciągany element z DOM, utwórz nowy obraz reprezentujący niestandardowy obraz opinii i dodaj detektor zdarzeń przeciągania dragstart w następujący sposób:

 let img = new Image();
img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png";document.querySelector('div').addEventListener('dragstart', (event)=>{
    event.dataTransfer.setDragImage(img, 10, 10);
})

W powyższym bloku kodu metoda setDragImage ma trzy parametry. Pierwszy parametr odwołuje się do obrazu. Pozostałe parametry reprezentują odpowiednio poziome i pionowe przesunięcie obrazu. Kiedy uruchomisz kod w przeglądarce i zaczniesz przeciągać element, zauważysz, że niestandardowy obraz przeciągania został zastąpiony wcześniej ustawionym niestandardowym obrazem.

Jeśli chcesz zezwolić na upuszczenie, musisz zapobiec domyślnemu zachowaniu, anulując zarówno zdarzenia dragenter, jak i dragover, w następujący sposób:

 const dropElement = document.querySelector("drop-target");dropElement.addEventListener("dragenter", (ev) => {
  ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
  ev.preventDefault();
});

Zrozumienie interfejsu DragEvent

JavaScript zawiera interfejs DragEvent, który reprezentuje interakcję typu „przeciągnij i upuść” ze strony użytkownika. Poniżej znajduje się lista możliwych typów zdarzeń w interfejsie DragEvent.

przeciągnij: użytkownik uruchamia to zdarzenie podczas przeciągania elementu.
dragend: To zdarzenie jest uruchamiane po zakończeniu operacji przeciągania lub gdy użytkownik ją przerwie. Typową operację przeciągania można zakończyć zwolnieniem przycisku myszy lub naciśnięciem klawisza Escape.
dragenter: Przeciągnięty element wyzwala to zdarzenie, gdy wejdzie w prawidłowy cel upuszczenia.
dragleave: Kiedy przeciągany element opuszcza miejsce docelowe, to zdarzenie jest uruchamiane.
przeciąganie: gdy użytkownik przeciągnie element, który można przeciągnąć nad obiekt docelowy, wyzwalane jest zdarzenie.
dragstart: zdarzenie jest wywoływane na początku operacji przeciągania.
drop: użytkownik wyzwala to zdarzenie, gdy upuści element na cel upuszczania.

Podczas przeciągania pliku do przeglądarki ze środowiska poza przeglądarką (na przykład menedżera plików systemu operacyjnego) przeglądarka nie wyzwala zdarzeń dragstart ani dragend.

DragEvent może się przydać, jeśli chcesz programowo wywołać niestandardowe zdarzenie przeciągania. Na przykład, jeśli chcesz, aby element div uruchamiał niestandardowe zdarzenia przeciągania podczas ładowania strony, oto jak to zrobić. Najpierw utwórz nową niestandardową funkcję DragEvent() w następujący sposób:

 const customDragStartEvent = new DragEvent('dragstart', {
    dataTransfer: new DataTransfer(),
})const customDragEndEvent = new DragEvent('dragend');

W powyższym bloku kodu niestandardoweDragStartEvent reprezentuje instancję DragEvent(). W zdarzeniu niestandardoweDragStartEvent znajdują się dwa argumenty konstruktora. Pierwszy reprezentuje typ zdarzenia przeciągania, który może być jednym z siedmiu typów zdarzeń wspomnianych wcześniej.

Drugi argument to obiekt z kluczem dataTransfer reprezentujący instancję DataTransfer, o czym dowiesz się więcej w dalszej części tego przewodnika. Następnie chwyć element, z którego chcesz wywołać zdarzenie, z Document Object Model (DOM).

 const draggableElement = document.querySelector("#draggable");

Następnie dodaj słuchacze zdarzeń w następujący sposób:

   draggableElement.addEventListener('dragstart', (event) => {
    console.log('Drag started!');
    event.dataTransfer.setData('text/plain', 'Hello, world!'); 
  });  draggableElement.addEventListener('dragend', () => {
    console.log('Drag ended!');
  });

W pierwszym detektorze zdarzeń powyżej funkcja wywołania zwrotnego rejestruje tekst „Rozpoczęto przeciąganie!” i wywołuje metodę setData na właściwości dataTransfer obiektu zdarzenia. Teraz możesz wyzwalać zdarzenia niestandardowe, takie jak to:

 draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Przesyłanie danych za pomocą funkcji DataTransfer

Obiekt dataTransfer służy jako pomost pomiędzy elementem źródłowym (elementem, który można przeciągać) a elementem docelowym (obszarem, który można upuścić) podczas operacji przeciągania i upuszczania. Pełni funkcję tymczasowego kontenera do przechowywania danych, które chcesz udostępnić pomiędzy tymi elementami.

Dane te mogą przybierać różne formy, takie jak tekst, adresy URL lub niestandardowe typy danych, co czyni je wszechstronnym narzędziem do wdrażania szerokiej gamy funkcji przeciągania i upuszczania.

Używanie setData() do pakowania danych

Aby przenieść dane z elementu przeciąganego do elementu, który można upuścić, użyjesz metody setData() udostępnionej przez obiekt dataTransfer. Ta metoda pozwala spakować dane, które chcesz przesłać i określić typ danych. Oto podstawowy przykład:

 element.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Kiedy użytkownik zaczyna przeciągać określony element, setData() pakuje tekst „Hello, world!” z typem danych tekst/zwykły. Dane te są teraz powiązane ze zdarzeniem przeciągania i obiekt docelowy, który można upuścić, może uzyskać do nich dostęp podczas operacji upuszczania.

Odzyskiwanie danych za pomocą metody getData()

Po stronie odbiorczej, w detektorze zdarzeń elementu, który można upuścić, możesz pobrać przesłane dane za pomocą metody getData():

 element.addEventListener('drop', (event) => {
  const transferredData = event.dataTransfer.getData('text/plain');
  console.log(`Received data: ${transferredData}`);
});

Powyższy blok kodu pobiera dane o tym samym typie danych (tekst/zwykły), który został ustawiony wcześniej przy użyciu metody setData(). Umożliwia to dostęp do przesłanych danych i manipulowanie nimi zgodnie z potrzebami w kontekście elementu, który można upuścić.

Przypadki użycia interfejsów „przeciągnij i upuść”.

Integracja funkcji „przeciągnij i upuść” z aplikacjami internetowymi może być potężnym ulepszeniem, ale ważne jest, aby zrozumieć, kiedy i dlaczego należy ją wdrożyć.

Przesyłające pliki: umożliwienie użytkownikom przeciągania plików bezpośrednio z pulpitu lub menedżera plików do wyznaczonego obszaru upuszczania upraszcza proces przesyłania.
Listy z możliwością sortowania: jeśli aplikacja zawiera listy elementów, takie jak listy zadań, listy odtwarzania lub galerie obrazów, użytkownicy mogą docenić możliwość zmiany kolejności elementów metodą przeciągania i upuszczania.
Interaktywne pulpity nawigacyjne: w przypadku narzędzi do wizualizacji danych i raportowania przeciąganie i upuszczanie może być dla użytkowników skutecznym sposobem dostosowywania pulpitów nawigacyjnych poprzez zmianę układu widżetów i wykresów.

Mając na uwadze dostępność

Chociaż przeciąganie i upuszczanie może być atrakcyjne wizualnie i poprawiać wygodę użytkownika, niezwykle ważne jest zapewnienie dostępności implementacji dla wszystkich użytkowników, w tym osób niepełnosprawnych. Zapewnij alternatywne metody interakcji, takie jak sterowanie klawiaturą, aby Twoja aplikacja była wszechstronna.