hogyan kell a HTML elemeket és fájlokat a Javascript
használatával Drag & Drop effektus meghatározásához a következő lépéseket kell követni:
5.1. Határozza meg a megengedett Csepphatás (ok) a Draggable elem a dragstart eseménykezelő
a effectAllowed tulajdonság a dataTransfer esemény tulajdonság, akkor határozza meg az összes csepp hatásokat, amelyek lehetővé teszik, hogy alkalmazni kell, hogy draggable elem.
Ez úgy történik, hogy különböző csepphelyeket lehet meghatározni, és különböző csepphatásokat lehet kezelni cseppenként.,
A következő táblázat meghatározza a lehetséges effectAllowed ingatlan értékek alapján MDN dokumentumok:
5.2. Minden Csepphelyhez adja meg a drop Effect(ek) et a dragover Event Handler
a definiálandó drop effektusnak a forráshely dragstart eseménykezelőjén meghatározott engedélyezett hatások egyikének kell lennie.,
Ha a csepphatás nem az engedélyezett csepphatások egyike, akkor az engedélyezett csepphatások egyikére lesz állítva.
a dragover kezelő, ahol a drop effektust meg kell határozni, akkor kerül végrehajtásra, amikor a vonszolt elemet egy lehetséges csepphely fölé húzzák.
a következő példa egy adott csepphelyre vonatkozó csepphatások meghatározására.
6) definiáljon egy Cseppzónát (Drop Location)
alapértelmezés szerint a HTML dokumentumban egyetlen elem sem engedélyezi a cseppet., Ez azonban módosítható annak érdekében, hogy egy elem, egy csepp zóna biztos:
- A ondragover eseménykezelő, ami végrehajtásra, amikor a mozgatható elem vonszolnának ez az elem. Ebben az eseménykezelőben a csepp helyének csepphatása az 5.2. lépésben korábban említettek szerint van meghatározva.
- az ondrop eseménykezelő, amely akkor kerül végrehajtásra, amikor a húzható elem a húzási helyre/zónába esik.
a következő példa egy elem csepp helyként történő meghatározására.,
mind a dragover a csepp eseménykezelők, preventDefault() kell hívni, hogy lehetővé tegye egy cseppet azt jelzi, hogy egy csepp engedélyezett azon a helyen.
Ha egy csepp csak bizonyos helyzetekben engedélyezett, ahol a feltételeket használják, akkor csak add preventDefault ha feltételek lehetővé teszik a csepp teljesülnek. Ez azért van így, hogy megakadályozza, hogy az elem cseppzóna legyen, ha a feltételek nem teljesülnek, ahol a cseppet nem szabad megengedni.,
egy csepp elutasítása a datatransfer tulajdonság húzási adatainak típusa alapján gyakori eset. A következő példa azt mutatja, hogy csak a dragover kezelővel rendelkező Drop zone elemben hagyhat le hivatkozásokat.
7) kezelje az elem cseppjét
a drop esemény során a drag adatokat feldolgozni kell. Ehhez a dataTransfer esemény tulajdonság getData() metódusát kell használni.,
a getData () metódus beolvassa a drag elemeket, mivel egyetlen argumentumot vesz igénybe az adatok típusáról, és visszaadja a hozzá társított karakterlánc értéket.
az allowedEffect and dropEffect tulajdonságok segítenek ellenőrizni a felhasználónak megjelenő visszajelzéseket.
Az ilyen visszajelzések kezelése a fejlesztő felelőssége, amelyet a drop event handlerben kell végrehajtani. Például egy elem visszakeresése és egy másik szülőhöz való csatolása áthelyezi, de a csomópont másolása másolási effektust eredményez.,
ha egyetlen cseppzónára több csepphatás van meghatározva, akkor a dropEffect tulajdonságot kell használni annak meghatározására, hogy melyik húzási műveletet kívánták az adott cseppeseményhez.
a következő példa egy csepp kezelésére.
néha előfordulhat, hogy ugyanazon adatok különböző típusait támogatta, de csak a legspecifikusabb típust szeretné letölteni. Az MDN docs következő kódja ezt mutatja.,
8) használja a dragend eseményt annak ellenőrzésére, hogy a Drop sikeres volt-e
a drag művelet végén egy dragend esemény tüzel a forráselemen. Az esemény tüzek, hogy a drag sikeres volt, vagy törölték.
annak ellenőrzéséhez, hogy a húzási művelet sikeres volt-e vagy sem, a dropEffect értéke a következőképpen ellenőrizhető:
- Ha a dropEffect tulajdonság értéke “nincs” a dragend eseménykezelőben, akkor azt jelenti, hogy a húzási műveleteket törölték.,
- egyébként a dropEffect tulajdonság értéke a sikeresen végrehajtott művelet.
Hmm, szóval hogyan hasznos ez?
a forráselem ezt az információt egy sikeres áthelyezési művelet után használhatja a vonszolt elem eltávolításához a régi helyről.
Demo a HTML Elem Húzza & Csepp
Megjegyzés: azt is klón a projekt a Github itt.,
1) Detect the Drag & Drop Feature Support in Your Browser
Before using the HTML drag & drop API, add feature detection code to ensure browser support.
The following code is the feature detection code for the HTML drag & drop API from Modernizr.,
2) definiáljon egy Cseppzónát (Drop Location)
alapértelmezés szerint a HTML dokumentumban egyetlen elem sem engedélyezi a cseppet. Ez azonban megváltoztatható, és ahhoz, hogy egy elem cseppzónává váljon, rendelkeznie kell a következőkkel:
- az ondragover eseménykezelő, amely akkor kerül végrehajtásra, amikor a fájl(ok) áthúzódnak a csepp helyére.
- az ondrop eseménykezelő, amely akkor kerül végrehajtásra, amikor a fájl(oka) t/ejtik a csepp helyen.,
az MDN dokumentumok szerint:
a dragstart és dragend események nem kerülnek kirúgásra, amikor egy fájlt az operációs rendszer böngészőjébe húznak.
a következő példa egy elem csepp helyként történő meghatározására.
3) kezelje a fájl csepp
amikor a felhasználó csepp a fájl(ok) egy csepp zónában, egy csepp esemény aktiválódik. A csepp esemény során a fájlt(fájlokat) a kívánt módon kell feldolgozni.,
minden leesett fájl eléréséhez használja az esemény DataTransfer tulajdonságát a fájlok tulajdonság eléréséhez. Az eldobott fájl elérése után használja a Fájl API-t annak feldolgozásához.
Ha a böngésző támogatja a DataTransferItemList tulajdonságot, akkor a Getasfile() módszerrel használhatja a DataTransfer tulajdonság használata helyett a fájl eléréséhez.
mind a dragover, mind a drop eseménykezelőkben a preventDefault () – t meg kell hívni egy csepp engedélyezéséhez, mivel azt jelzi, hogy egy csepp megengedett ezen a helyen., Ezenkívül megakadályozza a fájl megnyitását, ami az alapértelmezett viselkedés, amely akkor fordul elő, amikor egy fájlt egy weboldalra dob.
Ha egy csepp csak bizonyos helyzetekben engedélyezett, ahol a feltételeket használják, akkor csak add preventDefault ha feltételek lehetővé teszik a csepp teljesülnek. Ez azért van így, hogy megakadályozza, hogy az elem cseppzóna legyen, ha a feltételek nem teljesülnek, ahol a cseppet nem szabad megengedni.
a következő példa az MDN docs-ból bemutatja az eldobott fájlok feldolgozását, ahol a nem fájlhoz tartozó húzóelemet figyelmen kívül hagyják., Both possible ways are demonstrated in this
Demo on HTML Element’s Drag & Drop
Note: you can also clone the project from my Github here.