`Atributul draggable` în HTML

Indică dacă un element poate fi tras cu mouse-ul, ca parte din mecanismul nativ de drag and drop din HTML.

Sintaxă tag

<li draggable="true">Sarcină</li>

Ce face `Atributul draggable`

Atributul draggable primește valoarea true sau false. Nu este un atribut boolean: trebuie scrisă valoarea, nu doar numele. Imaginile și linkurile pot fi trase implicit; celelalte elemente au nevoie de draggable="true".

Atributul doar permite tragerea. Ca să se întâmple ceva la plasare, scrii JavaScript pentru evenimentele de drag and drop: dragstart pe elementul tras (unde pui datele cu event.dataTransfer.setData()), dragover pe zona țintă (unde apelezi preventDefault() ca să permiți plasarea) și drop (unde citești datele).

Drag and drop-ul nativ nu funcționează cu tastatura și are suport limitat pe ecranele tactile. Oferă și o cale alternativă, de exemplu butoane „Mută sus” și „Mută jos”.

Atribute

Atribut	Descriere
`true`	Elementul poate fi tras.
`false`	Elementul nu poate fi tras (util pentru a opri tragerea implicită a imaginilor și linkurilor).

Exemple

Exemplul 1: Mutarea unei sarcini dintr-o listă în alta

Sarcina trimite id-ul ei la dragstart; lista „Gata” o primește la drop și o mută la ea.

<ul id="de-facut">
  <li id="s1" draggable="true">Plătește factura de 180 lei</li>
</ul>
<ul id="gata" style="min-height: 40px; border: 2px dashed #10b981;"></ul>

<script>
  document.getElementById("s1").addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text/plain", e.target.id);
  });
  const gata = document.getElementById("gata");
  gata.addEventListener("dragover", (e) => e.preventDefault());
  gata.addEventListener("drop", (e) => {
    e.preventDefault();
    gata.append(document.getElementById(e.dataTransfer.getData("text/plain")));
  });
</script>

Ce afișează browserul

• Plătește factura de 180 lei
[zonă goală cu chenar verde punctat]
După ce tragi sarcina în chenarul verde, ea dispare din prima listă și apare în a doua.

Exemplul 2: Oprirea tragerii unei imagini

Logoul are draggable="false", deci nu mai poate fi tras accidental pe desktop sau într-o altă filă.

<img src="logo.png" alt="Librăria Junimea" width="120" draggable="false">