Atrybut globalny HTMLAtrybuty globalne
draggable
Określa, czy element można przeciągać myszą.
- Dotyczy
- Wszystkie elementy HTML
Przykład
#HTML
<style>
.chip { display: inline-block; padding: 6px 12px; margin: 4px; border-radius: 99px; background: #312e81; cursor: grab; }
</style>
<p>Spróbuj przeciągnąć kafelki:</p>
<span class="chip" draggable="true">Można przeciągać</span>
<span class="chip" draggable="false">Nie można</span>Podgląd
Definicja i zastosowanie
#Atrybut draggable włącza lub wyłącza przeciąganie elementu w ramach mechanizmu drag and drop. Obrazy i linki można przeciągać domyślnie, pozostałe elementy dopiero po ustawieniu draggable="true".
Samo przeciąganie to dopiero połowa pracy. Żeby coś się działo po upuszczeniu, JavaScript musi obsłużyć zdarzenia dragstart, dragover i drop.
Wartość trzeba podać jawnie jako true albo false. Zapis samego słowa draggable bez wartości nie działa jak atrybut logiczny.
Składnia
#Składnia
<element draggable="true | false">…</element>Wartości
#true
Element można przeciągać.false
Przeciąganie jest wyłączone, także dla obrazów i linków.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Mechanizm drag and drop słabo działa na ekranach dotykowych. Zapewnij też inny sposób, na przykład przyciski „w górę” i „w dół”.
- Ustaw
draggable="false"na obrazach w galerii, jeśli przeciąganie przeszkadza w przewijaniu.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.