Atrybut draggable i zdarzenie dragstart

Każdy element staje się źródłem przeciągania po ustawieniu draggable="true". Odnośniki i obrazy można przeciągać domyślnie; pozostałe elementy (div, li, span) wymagają jawnego ustawienia tego atrybutu. draggable="false" wyłącza element z natywnego przeciągania.

Gdy użytkownik rozpoczyna przeciąganie, element źródłowy emituje zdarzenie dragstart. To właśnie wtedy należy zainicjować przeciąganie: zapisać informację o przenoszonym elemencie, opcjonalnie nadać mu odpowiedni styl i zapisać dane w obiekcie dataTransfer, który odczyta element docelowy.

Jeśli oznaczysz element jako przeciągalny, ale nie obsłużysz zdarzenia dragstart, przeglądarka nadal będzie przeciągać jego obraz zastępczy, lecz nie zostaną ustawione żadne dane, więc większość elementów docelowych odrzuci upuszczenie. Zawsze łącz atrybut draggable z listenerem dragstart, który zapisuje przynajmniej identyfikator.

e.dataTransfer.effectAllowed = "move" w zdarzeniu dragstart ogranicza operację do jednej z wartości: "copy", "move", "link", "copyMove", "all" lub "none". Wpływa to na kursor wyświetlany przez przeglądarkę oraz na wartość dropEffect, którą element docelowy może ustawić później.

Dodaj klasę CSS do elementu źródłowego, aby podczas przeciągania był przyciemniony: card.classList.add("dragging"). Usuń tę klasę w zdarzeniu dragend, aby styl został wyczyszczony niezależnie od tego, czy upuszczenie się powiodło, czy zostało anulowane klawiszem Escape.

Domyślnie przeglądarka przeciąga półprzezroczystą migawkę elementu źródłowego. Możesz to zmienić za pomocą e.dataTransfer.setDragImage(node, offsetX, offsetY) — przekaż ukryty element DOM lub obiekt Image, aby wyświetlać niestandardowy podgląd przy kursorze.

dragend jest emitowane na elemencie źródłowym po zakończeniu przeciągania — niezależnie od tego, czy upuszczenie się powiodło, nastąpiło na nieprawidłowym elemencie docelowym, czy zostało anulowane. Używaj go do sprzątania: usuwania klasy dragging, ukrywania podglądów i przywracania przezroczystości.

Wewnątrz dragend sprawdź e.dataTransfer.dropEffect. Jeśli wartość wynosi "none", upuszczenie nie nastąpiło (element docelowy je odrzucił, użytkownik nacisnął Escape albo upuścił element poza stroną). W przeciwnym razie odpowiada ona efektowi wybranemu przez element docelowy ("move", "copy", "link").

Natywne przeciąganie i upuszczanie jest projektowane przede wszystkim z myślą o komputerach. Na urządzeniach dotykowych API działa bardzo słabo bez polyfillu lub rozwiązania opartego na Pointer Events. W interfejsach zmiany kolejności elementów przeznaczonych na urządzenia mobilne preferuj biblioteki takie jak SortableJS lub dnd-kit, które abstrahują różnice między oboma modelami zdarzeń.

Natywne przeciąganie i upuszczanie nie jest dostępne z klawiatury — użytkownicy korzystający wyłącznie z klawiatury nie mogą zmieniać kolejności elementów. Zawsze zapewniaj alternatywę: obsługę klawiszy strzałek, przyciski przenoszenia w górę i w dół albo okno dialogowe zmiany kolejności sterowane za pomocą aria. Przeciąganie i upuszczanie powinno rozszerzać możliwości interfejsu, a nie ich zastępować.

Zaznaczanie tekstu wewnątrz przeciągalnych elementów może zakłócać przeciąganie. Zastosuj CSS user-select: none oraz -webkit-user-drag: element do elementu źródłowego, aby przeglądarka przeciągała element zamiast zaznaczać znajdujący się w nim tekst.

Dlaczego zazwyczaj trzeba podłączyć listener dragstart, mimo że sam atrybut draggable="true" sprawia, że element można przeciągać?

Oznacz źródła za pomocą draggable="true" i użyj dragstart do wypełnienia dataTransfer, ustawienia effectAllowed oraz opcjonalnie niestandardowego obrazu przeciągania. Połącz to ze zdarzeniem dragend, aby wyczyścić style. Zapewnij alternatywy klawiaturowe na potrzeby dostępności i rozważ użycie polyfillu na urządzeniach dotykowych.