Jak korzystać z HTML Drag and Drop API

Przeciągnij i upuść to podstawowa funkcja, która zwiększa interakcję użytkownika i ułatwia płynne korzystanie z aplikacji. Niezależnie od tego, czy chcesz zbudować narzędzie do przesyłania plików, sortowalną listę czy interaktywną grę, zrozumienie, jak wykorzystać możliwości tego interfejsu API, jest kluczową umiejętnością w zestawie narzędzi do tworzenia stron internetowych.

Podstawy przeciągania i upuszczania w HTML

pierwsza kategoria obejmuje elementy, którymi można manipulować za pomocą urządzenia wskazującego, takiego jak mysz, i przenosić je do alternatywnych obszarów; podczas gdy druga kategoria składa się z elementów, które ogólnie wyznaczają wyznaczone miejsca docelowe dla tych elementów, umożliwiając użytkownikom upuszczenie ich w tych lokalizacjach.

Aby włączyć funkcję przeciągania i upuszczania w aplikacji internetowej, konieczne jest określenie, które elementy są przeznaczone do manipulacji poprzez użycie atrybutu “draggable” w odpowiednich znacznikach HTML. Ustawiając wartość tego atrybutu na “true”, tak jak w podanym przykładzie, dany element może być następnie przenoszony lub zmieniany przez użytkownika w interfejsie za pomocą akcji przeciągania i upuszczania.

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

Po zainicjowaniu operacji przeciągania za pomocą zdarzenia wejściowego generowanego przez użytkownika, znanego jako “zdarzenie przeciągania”, przeglądarka internetowa konwencjonalnie zapewnia reprezentację zastępczą określaną jako obraz “ducha”. Ta wizualna wskazówka służy do wskazywania i dostarczania informacji zwrotnych dotyczących stanu lub postępu elementu poddawanego manipulacji w procesie przeciągania.

Istnieje możliwość spersonalizowania tej ilustracji poprzez umieszczenie w jej miejscu własnej zawartości wizualnej. Można to osiągnąć, wybierając ruchomy komponent z Document Object Model (DOM), generując nowy obraz, który posłuży jako dostosowana grafika zwrotna, i włączając

 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);
})

Wyżej wymieniony blok kodu demonstruje wykorzystanie metody setDragImage , która obejmuje trzy parametry wejściowe. Początkowy parametr odnosi się do pożądanego obrazu, podczas gdy kolejna para parametrów wyznacza odpowiednie przesunięcia poziome i pionowe wspomnianej reprezentacji wizualnej. Po wykonaniu w przeglądarce internetowej i zainicjowaniu aktu przeciągania elementu, staje się oczywiste, że domyślny obraz przeciągania został zastąpiony przez wcześniej skonfigurowany niestandardowy obraz.

Aby zezwolić na zwolnienie, konieczne jest przeciwdziałanie standardowej operacji poprzez unieważnienie zarówno zdarzeń dragenter, jak i dragover, jak pokazano poniżej:

 const dropElement = document.querySelector("drop-target");

dropElement.addEventListener("dragenter", (ev) => {
  ev.preventDefault();
});

dropElement.addEventListener("dragover", (ev) => {
  ev.preventDefault();
});

Zrozumienie interfejsu DragEvent

JavaScript udostępnia interfejs DragEvent, który hermetyzuje interakcję użytkownika typu “przeciągnij i upuść”. Poniżej przedstawiono niektóre typy zdarzeń powiązane z tym interfejsem:

Podczas przeciągania określonego elementu, użytkownik wywołuje zdarzenie “przeciągnij”.

Zdarzenie “dragend” jest wyzwalane po zakończeniu operacji przeciągania, w wyniku zwolnienia przycisku myszy lub naciśnięcia klawisza escape.

Zdarzenie dragenter jest wyzwalane przez przeciągnięty element, gdy porusza się on nad prawidłowym celem upuszczenia, co może wskazywać na działanie lub interakcję, która obejmuje przenoszenie danych z jednej lokalizacji do drugiej w interfejsie użytkownika.

Zdarzenie “dragleave” jest wyzwalane, gdy przeciągany element przestaje być pozycjonowany nad lub na określonym celu upuszczenia. Zdarzenie to służy jako odpowiednik zdarzenia “dragenter”, które występuje, gdy przeciągany element początkowo wchodzi w potencjalny cel upuszczenia.

Podczas procesu przeciągania manipulowalnego elementu przez obszar receptywny, zdarzenie jest wyzwalane przez działanie użytkownika.

Po zainicjowaniu, zdarzenie “dragstart” jest wyzwalane w celu rozpoczęcia akcji przeciągania.

Po otrzymaniu danych wejściowych od użytkownika, zainicjujemy akcję “drop” w naszym systemie. Zdarzenie to jest wyzwalane, gdy użytkownik zwolni element na wyznaczonym obszarze docelowym przeznaczonym do tego celu.

Gdy pliki są przesyłane do przeglądarki internetowej za pomocą środków zewnętrznych, takich jak narzędzie do zarządzania plikami systemu operacyjnego, przeglądarka nie inicjuje w odpowiedzi zwyczajowych zdarzeń “dragstart” lub “dragend”.

Wykorzystanie DragEvent może okazać się korzystne, gdy chcemy wysłać niestandardowe zdarzenie przeciągania algorytmicznie. Dla przykładu, załóżmy, że ktoś chce zainicjować niestandardowe zdarzenia przeciągania dla danego elementu div podczas ładowania strony. Proces ten wiązałby się z utworzeniem nowej instancji DragEvent , takiej jak pokazano poniżej:

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

const customDragEndEvent = new DragEvent('dragend');

W powyższym fragmencie kodu, customDragStartEvent jest instancją klasy DragEvent() , zawierającą dwa parametry konstruktora. Parametr początkowy określa konkretny typ zdarzenia przeciągania, obejmujący dowolny z wcześniej wymienionych siedmiu możliwych typów zdarzeń.

Drugi parametr reprezentuje obiekt zawierający właściwość o nazwie “dataTransfer”, która odpowiada instancji interfejsu DataTransfer. Interfejs ten zostanie omówiony bardziej szczegółowo w niniejszym przewodniku. Aby uzyskać dostęp do żądanego elementu w modelu obiektowym dokumentu (DOM), wykonaj następujące kroki…

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

Następnie dodaj detektory 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 początkowym detektorze zdarzeń wykorzystaliśmy funkcję wywołania zwrotnego, która rejestruje komunikat “Przeciąganie rozpoczęte!”, jednocześnie wywołując metodę setData na właściwości dataTransfer obiektu event . Pozwala nam to skutecznie inicjować nasze niestandardowe zdarzenia w płynny sposób.

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

Przesyłanie danych za pomocą dataTransfer

Obiekt przesyłania danych działa jako łącznik pośredniczący między elementem źródłowym, który jest przeciąganą jednostką, a jego zamierzonym odbiorcą lub upuszczanym regionem. Podczas procesu przeciągania i upuszczania działa jako repozytorium przejściowe przeznaczone do przechowywania informacji, które mają być udostępniane między tymi dwoma podmiotami.

Wszechstronność tych danych jest widoczna dzięki ich zdolności do przyjmowania wielu formatów, w tym tekstu, adresów URL i niestandardowych typów danych, umożliwiając w ten sposób szeroki wachlarz funkcji przeciągania i upuszczania.

Używanie metody setData() do pakowania danych

Aby przekazać informacje z komponentu, którym można manipulować, do pojemnika, można wykorzystać możliwości metody setData() dostarczanej przez obiekt dataTransfer . Takie podejście umożliwia hermetyzację danych, które zamierzasz przesłać, jednocześnie określając ich typ danych. Poniżej przedstawiono podstawową ilustrację:

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

Po zainicjowaniu czynności przenoszenia elementu oznaczonego jako posiadający określone atrybuty, wysyłamy wiadomość zawierającą informację “Hello, world!” w formacie oznaczonym jako text/plain. Treść ta zostaje połączona z akcją przeciągania i może być następnie pobrana przez zamierzonego odbiorcę upuszczonego obiektu podczas procesu jego zwalniania.

Pobieranie danych za pomocą getData()

W zakresie elementu, który może zostać upuszczony i zarejestrował się dla tej możliwości poprzez implementację słuchacza zdarzeń, można pobrać dane, które zostały przesłane za pomocą metody getData() :

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

Wspomniany segment kodu pobiera informacje o tej samej klasyfikacji treści (text/plain), która została ustalona przez poprzednią procedurę setData() . W konsekwencji umożliwia to uzyskanie i zmianę przekazywanych danych zgodnie z wymaganiami środowiska komponentu droppable.

Przypadki użycia dla interfejsów przeciągnij i upuść

Włączenie funkcji przeciągnij i upuść do aplikacji internetowych ma ogromny potencjał jako ulepszenie, ale kluczowe znaczenie ma zrozumienie konkretnych sytuacji i powodów wdrożenia tej funkcji.

Umożliwiając użytkownikom łatwe przesyłanie plików z eksploratora plików lub pulpitu komputera za pomocą wyznaczonej strefy upuszczania, proces przesyłania treści multimedialnych jest usprawniony i bardziej przyjazny dla użytkownika.

W sytuacjach, w których interakcja użytkownika z aplikacją obejmuje listy różnych elementów, w tym zadań, plików multimedialnych lub innych istotnych elementów, zapewnienie im środków do zmiany kolejności tych elementów za pomocą funkcji przeciągania i upuszczania może poprawić ich ogólne wrażenia, oferując bardziej intuicyjną i wydajną metodę organizowania treści.

Aby stworzyć interaktywny pulpit nawigacyjny z możliwościami wizualizacji danych i raportowania, funkcja przeciągania i upuszczania pozwala użytkownikom łatwo zmieniać układ różnych widżetów i wykresów zgodnie z ich preferencjami. Funkcja ta umożliwia użytkownikom dostosowanie pulpitu nawigacyjnego do ich konkretnych potrzeb w czasie rzeczywistym, zwiększając ogólną użyteczność i elastyczność platformy.

Pamiętając o dostępności

Podczas gdy atrakcyjność wizualna funkcji przeciągania i upuszczania może pozytywnie wpłynąć na ogólne wrażenia użytkownika, konieczne jest zagwarantowanie jej dostępności dla różnych umiejętności. Aby osiągnąć inkluzywność, należy rozważyć włączenie dodatkowych trybów interakcji, takich jak opcje sterowania oparte na klawiaturze, które uwzględniają osoby niepełnosprawne i poszerzają zakres użyteczności.