Autor publikacji
Virtual Patriot - Administrator

draggable

Data publikacji
Ostatnio edytowano

Przeznaczenie atrybutu draggable

Za pomocą atrybutu draggable możemy określić czy interesujący nas element HTML może zostać przeciągnięty przez użytkownika, czy też nie.

Wartość domyślna

false (w każdej sytuacji), lecz tylko wtedy gdy dany element HTML nie jest elementem a posiadającym atrybut href, elementem img lub elementem object reprezentującym zasób internetowy w postaci obrazka, w przeciwnym przypadku wartość true

Wartości atrybutu draggable

true

Wartość true oznacza, że dany element HTML może zostać przeciągnięty przez użytkownika.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <style>p { background-color:orange; }</style>
  </head>
  <body>

    <p>
      Ten element "p" nie może zostać przeciągnięty przez użytkownika.
    </p>

    <p draggable="true">
      Ten element "p" może zostać przeciągnięty przez użytkownika.
    </p>

  </body>
</html>

Rezultat

Ten element "p" nie może zostać przeciągnięty przez użytkownika.

Ten element "p" może zostać przeciągnięty przez użytkownika.

Drugi przykładowy element "p" może zostać przeciągnięty przez użytkownika, ponieważ do wspomnianego elementu "p" został dodany atrybut "draggable" wraz z wartością "true".

false

Wartość false oznacza, że dany element HTML nie może zostać przeciągnięty przez użytkownika.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p>
      <img src="https://webkod.pl/files/html/zwierze-01.png" alt="lew">
    </p>

    <p>
      <img src="https://webkod.pl/files/html/owoc-01.png" draggable="false" alt="czereśnia">
    </p>

  </body>
</html>

Rezultat

lew

czereśnia

Drugi przykładowy element "img" nie może zostać przeciągnięty przez użytkownika, ponieważ do wspomnianego elementu "img" został dodany atrybut "draggable" wraz z wartością "false".

Przypuszczalnie domyślne reguły CSS związane z atrybutem draggable

/* brak */

Interpretacja atrybutu draggable

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Zobacz więcej informacji o interpretacji atrybutu .