TL; DR – A HTML5 Drag and Drop API lehetővé teszi, hogy ragadjon meg egy HTML-objektumot a kurzorával, és húzza át egy másik helyre.
Mit húzhat és dobhat a HTML5-ben?
A HTML5 lehetővé teszi, hogy bármely elemet húzhatóvá tegye, lehetővé téve, hogy elővegye a kurzorral, és áthúzza egy másik helyre, amelyet eldobható elemként határoz meg. Az alábbi példában próbáljon meg egy négyzetre húzni egy képet:
Ez a funkció leegyszerűsíti a felhasználói élményt, sőt egyszerű online játékok létrehozását is lehetővé teszi (például virtuális sakkfigurákat húzhat és dobhat). Amikor meghúz egy elemet, annak átlátszó mása együtt mozog a kurzorral, amíg az egérgomb felengedésével addig nem dobja el.
Technikailag a Drag and Drop egy HTML5-hez hozzáadott JavaScript API. Ezért fontos, hogy rendelkezzen legalább alapvető szkript-ismeretekkel, hogy képes legyen működni ezzel a funkcióval.
Események a HTML5 fogd és vidd
Az alábbi táblázatban látni fogja az összes olyan esemény, amely a drag and drop funkcióhoz kapcsolódik:
| Esemény | Magyarázat |
|---|---|
| húzás | A kurzor egy elem húzása közben mozog |
| drop | A húzási folyamat befejeződik |
| dragstart | A kurzor felveszi az elemet, és elkezd húzni |
| dragend | Az egérgomb elengedve eldobja az elemet |
| dragenter | A kurzor belép a cél elembe |
| dragleave | A kurzor elhagyja a célelemet |
| dragover | A kurzor a célelem fölé mozog |
Lépésről lépésre A húzás magyarázata
A HTML5 drag and drop kódolás első látásra elég bonyolultnak tűnik, mivel a JS-ben szkripteket is tartalmaz. Tanulmányozzuk azonban a folyamat egyes részeit a könnyebb megértés érdekében.
Húzható elemek
Először meg kell győződnie arról, hogy a húzni kívánt elem rendelkezik-e HTML5 draggable attribútum alkalmazva, értéke true:
húzás
Ezután határozza meg, hogy mi történjen az objektum húzása után. Megteheti hívással eseménykezelő egy dragstart eseményhez és egy végrehajtandó függvény meghatározása.
A húzott adatok értékét és adattípusát a dataTransfer.setData() módszer:
Dobás
A HTML5 áthúzható adatokat úgy határozhatja meg, hogy egy eseménykezelőt csatol az dragover eseményhez.
Az elemeket és az adatokat nem lehet alapértelmezés szerint más elemekben esett be. Ez azt jelenti, hogy le kell állítania az elemeket alapértelmezett viselkedés a event.preventDefault() módszer használatával:
drop esemény akkor következik be, amikor a HTML5 húzható adatait eldobják. A ondrop eseménykezelő hívja meg:
A végső kód: példa
Alapvetően a kódra van szükséged ahhoz, hogy hajtson végre négy lépést:
- A
preventDefault() - adatok lekérése megakadályozza a webböngésző alapértelmezett, az adatokkal kapcsolatos műveletét. a
dataTransfer.getData()módszerrel - Csatolja a húzott elemet a drop elemre
Lássuk, hogyan működik a alábbi példa:
HTML5 Drag and Drop: Hasznos tippek
- Különböző típusú elemeket húzhat, beleértve, de nem kizárólag, fájlokat, linkeket, képeket és szöveget.
- Több elemet is húzhat egyszerre. Javasoljuk azonban, hogy mindegyikük ugyanabban a formátumban legyen a következetesség érdekében.
- A felhasználói adatbevitelt elfogadó űrlapelemek alapértelmezés szerint lehúzható területek lehetnek.