|
|
Közzétéve: 2022-4-26, 10:30:50
|
|
|
|
A HTML5 drag-and-drop (DnD) API azt jelenti, hogy szinte bármelyik elem egy oldalon elhúzhatóvá válhat. Ebben a cikkben a drag and drop alapjait tárgyaljuk.
Húzható tartalom létrehozása
Érdemes megjegyezni, hogy a legtöbb böngészőben a szövegválasztások, képek és linkek alapértelmezetten húzhatók. Például, ha a Google logót húzod a Google keresésben, egy kísértetképet látsz. A képet ezután be lehet húzni és behúzni a címsorba, <input type="file" /> elembe, vagy akár az asztalon is. Ahhoz, hogy más típusú tartalmak húzhatók legyenek, a HTML5 DnD API-t kell használni.
Ahhoz, hogy egy objektumot húzzunk el, állítsuk be az elemetdraggable=true。 A húzás szinte bármilyen elemhez támogatható, beleértve a képeket, fájlokat, linkeket, fájlokat vagy bármilyen jelölést egy oldalon.
A példánkban létrehozunk egy interfészt, amellyel néhány oszlopot átrendezünk, amelyeket a CSS Grid-en keresztül rendeztek ki. Az alapjelölt ezekhez az oszlopokhoz az alábbiakban látható, az egyes oszlopok esetén a draggable tulajdonság igaz.
Itt van a CSS a konténer- és dobozelemekhez. Megjegyzendő, hogy a DnD funkcionalitással kapcsolatban csak a kurzor: move tulajdonság kapcsolódik. A kód többi része csak a konténer és doboz elemek elrendezését és stílusát szabályozza.
Ekkor látod, hogy húzhatod a tárgyat, de semmi más nem történik. A DnD funkciók hozzáadásához a JavaScript API-t kell használnunk.
Hallgass drag eseményekre
Számos különböző esemény csatlakozhat, hogy nyomon kövessék a teljes drag-and-drop folyamatot.
- dragstart
- húz
- Dragenter
- dragleave
- Dragover
- csepp
- dragend
A DnD stream feldolgozásához valamilyen forráselemre (a drag kezdőpontja), az adat raher (amit el akarsz helyezni), és a célpontra (az a terület, ahol a snap elhelyezkedik). A forráselemek lehetnek képek, listák, linkek, fájlobjektumok, HTML blokkok stb. A cél, hogy elfogadják az adat drop zone-ját (vagy ledobózónákat tartalmazó halmazát), amelyeket a felhasználó el akar helyezni. Ne feledd, hogy nem minden elem lehet cél, például a képek nem lehetnek célok.
A drag-and-drop sorozat indítása és befejezése
Miután a tartalomon meghatározta a draggable="true" tulajdonságot, csatolj egy dragstart eseménykezelőt, amely elindítja a DnD sorozatot minden oszlophoz.
Ez a kód 40%-ra állítja az oszlop átlátszóságát, amikor a felhasználó elkezdi húzni, majd a drag esemény végén visszaállítja az 100%-ra.
Az eredmények láthatók az alábbi Glitch demóban. Ha húzz egy tárgyat, az átlátszatlanná válik. Mivel a dragstart esemény a forráselemet célozza, a this.style.opacity beállítása 40%-ra vizuális visszajelzést ad a felhasználónak, hogy a jelenleg kiválasztott elem mozog. Miután az elem elhelyezkedett, a forráselem visszatér 100%-os átlátszóságra, bár a helymeghatározó függvény még nem íródott meg.
Használd a dragentert, dragovert és dragleave-t, hogy további vizuális jeleket adj hozzá
Ahhoz, hogy segítsek a felhasználóknak megérteni, hogyan kell interakcióba lépni az interfészeddel, használd a dragenter, dragover és dragleave eseménykezelőket. A következő példában az oszlopok húzhatók vagy célozhatók. Ennek megértése érdekében amikor a felhasználó egy elemet húz egy oszlop mellett, az oszlop határa szaggatott vonal lesz. Például létrehozhatsz egy over-osztályt a CSS-ben, amely egy olyan elemet képvisel, amely elhelyezési célpont:
Ezután állíts be egy eseménykezelőt JavaScriptben, hogy hozzáadja az over-osztályt, amikor egy oszlopon áthúzod, és eltávolítod azt, amikor elhagyod. A dragend kezelőben azt is szeretnénk biztosítani, hogy az osztály a drag végén el van távolítva.
Van néhány pont, amit érdemes megemlíteni ebben a kódban:
Amikor egy elemet, például egy linket húzol, blokkolnod kell a böngésző alapértelmezett viselkedését, vagyis a linkhez való navigálást. Ehhez hívd az e.preventDefault() gombot a dragover eseményben. Egy másik jó gyakorlat, ha ugyanabban a kezelőben hamisat adsz vissza.
Használd a dragenter eseménykezelőt a kasztváltáshoz, ne dragovert. Ha dragovert használsz, a CSS osztály többször is kikapcsol, mert az esemény dragover folyamatosan aktiválódik, amikor az oszlop lebeg. Végül ez miatt a böngésző renderelője sok felesleges munkát fog végezni. A legjobb, ha mindig minimálisra rajzolod. Ha valamiért dragover eseményeket kell használni, fontold meg az eseményhallgatók korlátozását vagy eltávolítását.
Fejezd be a helymeghatározást
A tényleges elhelyezés kezeléséhez adj hozzá egy eseményhallgatót a drop eseményhez. Egy drop handlerben blokkolni kell a böngésző alapértelmezett elhelyezési viselkedését, ami általában valamilyen bosszantó átirányítás. e.stopPropagation() hívható, hogy megakadályozzák az esemény DOM-ot aktiválását.
Ügyelj arra, hogy az új kezelőt a másik kezelőben regisztráld:
Ha most futtatod a kódot, a projekt nem kerül új helyre. Ennek eléréséhez DataTransfer objektumot kell használni.
A dataTransfer tulajdonság az, ahol minden DnD csodának megtörténik. A drag műveletben elküldött adattöredékeket menti el. A dataTransfer a dragstart eseményben van beállítva, és a drop eseményben olvasható/feldolgozva. Hívjuk az e.dataTransfer.setData(mimeType, dataPayload) címét, hogy beállítsuk az objektum MIME típusát és adatterhelését.
A következő példában lehetővé tesszük, hogy a felhasználók átrendezzék az oszlopok sorrendjét. Ehhez először a forráselem HTML-jét kell tárolni a drag elején:
Kezeld az oszlop elhelyezését a drop eseményben, állítsd be a forrásoszlop HTML-jét a céloszlop HTML-jére, ahol az található, először ellenőrizd, hogy a felhasználó által húzott és eldobott céloszlop ugyanaz-e, mint a forrásoszlop.
További ellenállási tulajdonságok
A dataTransfer objektum olyan tulajdonságokat tár fel, amelyeket a felhasználó számára használnak a húzás során vizuális visszajelzést nyújtani. Ezek a tulajdonságok arra is használhatók, hogy szabályozzák, hogyan reagál az egyes elhelyezési célpontok adott adattípusokra.
- dataTransfer.effectAllowed korlátozza, hogy a felhasználó milyen "húzás típusát" végezhet egy elemen. A drag-and-drop kezelési modellben használják a dropEffect inicializálására dragenter és dragover események során. Ez a tulajdonság a következő értékekre állítható: none, copy, copyLink, copyMove, link, linkMove, move, all és uninitialized.
- dataTransfer.dropEffect szabályozza a felhasználó számára kapott visszajelzést a dragenter és dragover események során. Amikor a felhasználó a célelem fölé lebeg, a böngésző kurzora jelzi a végrehajtandó művelet típusát (pl. másolás, mozgatás stb.). A hatás lehet az alábbi értékek egyike: none, másolás, link, move.
- e.dataTransfer.setDragImage(imgElement, x, y) jelzi, hogy a böngésző alapértelmezett "ghost image" visszacsatolása nem használatos, helyette van egy opció a drag ikon beállítására.
Fájlok feltöltése húzással és ledobással
A következő egyszerű példa egy oszlopot használ húzás forrásként és célpontként. Ez látható a felhasználói felületen, amikor a felhasználótól azt kérik, hogy átrendezze az elemeket. Bizonyos esetekben a célpont és a forrás húzása eltérő lehet, például egy olyan interfészben, ahol a felhasználónak egy képet kell kiválasztania a termék fő képeként úgy, hogy a kiválasztott képet a célra húzza.
A drag and drop használata gyakran lehetővé teszi, hogy a felhasználók az asztalról az alkalmazásba húzzák az eszközöket. A fő különbség a drop handler. A dataTransfer.getData() használata nélkül a fájl adatai a dataTransfer.files tulajdonságba kerülnek:
Eredeti link:A hiperlink bejelentkezés látható.
|
Előző:Rufus promptok nem sikerült letölteni fájlhibát, megoldástKövetkező:A HTML a div elemet úgy állítja be, hogy tetszőlegesen húzza
|
Közzétéve: 2022-4-26 21:27:25
|
