Implementacja funkcji „przeciągnij i upuść” jest łatwiejsza niż myślisz. Dowiedz się, jak to zrobić, z tego przydatnego przewodnika.

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 swojej sieci zestaw narzędzi programistycznych.

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ć i które użytkownicy mogą używać można poruszać się za pomocą myszy, a drugi typ zawiera elementy, które można upuszczać, które zazwyczaj określają, gdzie użytkownicy mogą umieścić plik element.

Aby zaimplementować przeciąganie i upuszczanie, musisz poinformować przeglądarkę, które elementy chcesz przeciągać. Aby element mógł być przeciągany przez użytkownika, element ten powinien mieć

instagram viewer
przeciąganeAtrybut HTML Ustawić PRAWDA, lubię to:

<divdraggable="true">This element is draggablediv>

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 przeciąganie przeciągnij detektor zdarzeń w ten 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 plik ustawDragImage Metoda 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 oba przeciągacz I dragover wydarzenia, takie jak to:

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

Zrozumienie interfejsu DragEvent

Funkcje JavaScript Przeciągnij wydarzenie interfejs reprezentujący interakcję typu „przeciągnij i upuść” ze strony użytkownika. Poniżej znajduje się lista możliwych typów zdarzeń w sekcji Przeciągnij wydarzenie interfejs.

  • ciągnąć: użytkownik uruchamia to zdarzenie podczas przeciągania elementu.
  • przeciągnąć: To zdarzenie jest wywoływane 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.
  • przeciągacz: Przeciągnięty element wyzwala to zdarzenie, gdy wejdzie w prawidłowy cel upuszczenia.
  • przeciągać: Kiedy przeciągany element opuszcza miejsce docelowe, to zdarzenie jest uruchamiane.
  • dragover: gdy użytkownik przeciągnie element, który można przeciągnąć nad obiekt docelowy, zostanie wywołane zdarzenie.
  • przeciąganie: zdarzenie jest wywoływane na początku operacji przeciągania.
  • upuszczać: użytkownik wyzwala to zdarzenie, gdy upuści element na cel upuszczania.

Podczas przeciągania pliku do przeglądarki ze środowiska spoza przeglądarki (na przykład menedżera plików systemu operacyjnego) przeglądarka nie uruchamia przeciąganie Lub przeciągnąć wydarzenia.

Przeciągnij wydarzenie może się przydać, jeśli chcesz programowo wywołać niestandardowe zdarzenie przeciągania. Na przykład, jeśli chcesz a div aby uruchomić niestandardowe zdarzenia przeciągania podczas ładowania strony, oto jak to zrobić. Najpierw utwórz nowy zwyczaj Przeciągnij wydarzenie() lubię to:

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

W powyższym bloku kodu niestandardoweDragStartEvent reprezentuje przykład Przeciągnij wydarzenie(). W niestandardoweDragStartEvent, istnieją 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 a transfer danych klucz reprezentujący instancję Transfer danych, o czym dowiesz się więcej w dalszej części tego przewodnika. Następnie chwyć element, od którego chcesz wywołać zdarzenie, z Model obiektowy dokumentu (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 ustawDane metoda na transfer danych nieruchomość na wydarzenie obiekt. Teraz możesz wyzwalać zdarzenia niestandardowe, takie jak to:

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

Przesyłanie danych za pomocą funkcji DataTransfer

The transfer danych Obiekt 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 ustawDane() metoda podana przez transfer danych obiekt. 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!');
});

Gdy użytkownik zacznie przeciągać określony element, ustawDane() pakuje tekst „Hello, world!” z typem danych Zwykły tekst. 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 otrzymać dane() metoda:

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 (Zwykły tekst), który został ustawiony za pomocą ustawDane() metoda wcześniej. 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: Dla narzędzia 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.