HTML5 Húzza egyszerűen: HTML5 húzható objektumok létrehozása

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:

példa

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:

Példa

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:

Példa

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.

Böngésző támogatás

Chrome

46+

Edge

Minden

Firefox

3.5+

IE

10+

Opera

Minden

Safari

3.1+

Mobil böngésző támogatás

Chrome

Firefox

Minden

Opera

Safari

Leave a Reply

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük