Drag & Drop HTML-ben

A Drag and Drop (húzd és ejtsd) műveletek lehetővé teszik, hogy a felhasználó áthelyezzen HTML elemeket az oldalon belül. Ezt a HTML5 szabvány natív módon támogatja JavaScript használatával.

Alapvető működés

Ahhoz, hogy egy elemet húzhatóvá tegyünk, adjuk hozzá a 'draggable="true"' attribútumot. A célterületnek eseménykezelőket kell tartalmaznia a 'dragover' és 'drop' eseményekhez.

Események

A drag & drop működéséhez különböző eseményekre kell figyelnünk: - dragstart: a húzás elkezdődése - dragover: az elem fölé érkezik valami - drop: az elemre történik az ejtés - dragend: a húzás véget ér - dragenter / dragleave: az elem belépése/kilépése egy célterületre

Adatkezelés

A 'dataTransfer' objektum segítségével információt küldhetünk a húzott elemről. A setData és getData metódusokkal adhatjuk át például az elem ID-jét vagy más egyedi adatot.

Gyakorlati tanácsok

A drag & drop funkciók jól használhatók például fájlok feltöltésénél, listák újrarendezésénél vagy vizuális szerkesztőkben. Mindig biztosítsunk visszajelzést a felhasználónak, például stílusváltással, ha egy elem épp húzható vagy elérhető célként viselkedik.