A HTML5 lehetőség van, hogy drag and drop HTML elemek belsejében egy HTML oldal. A JavaScript esemény hallgatóinak segítségével eldöntheti, hogy mi történik, ha a felhasználó elemeket húz vagy dob.
a drag and drop HTML elemek két szerepkört vehetnek fel:
- Draggable
- drop target / drop zone.
a húzható elem az az elem, amelyet a felhasználónak képesnek kell lennie arra, hogy a HTML oldal körül húzza, majd valahol eldobja, hogy valamilyen művelet megtörténjen. Ez lehet egy vagy több elem.,
a cseppcél vagy cseppzóna az az elem, amelyre a húzható elemek leesnek.
Drag and Drop Events
a HTML elemek húzásakor bekövetkező események szabályozásához 3 lépést kell végrehajtania:
- állítsa a HTML elemeket húzható értékre.,
- Csatolás esemény hallgatók, hogy a mozgatható HTML elem
- Csatolás esemény hallgatók a drop target HTML elem
Az események attribútumok illusztrált itt:
Először állítsa be a draggable="true" attribútum a HTML elem(ek), hogy mozgatható.
adragstartésdragend eseményekhez csatolja az eseményhallgatókat., Ezen eseményhallgatókon belül végrehajthatja, hogy mi fog történni, amikor a felhasználó elkezdi húzni az elemet, majd amikor a húzás véget ér.
harmadik csatolja esemény hallgatók a csepp cél elem. A meghallgatható események a következők: dragenter, dragover, dragleaveés drop.
a dragenter esemény ki van kapcsolva, amikor a felhasználó húzza a húzható rá a csepp cél., Ez az esemény csak akkor tüzel, ha a húzható elem kívülről túlra változik, amelyet általában az egér kurzor pozíciója határoz meg.
Ha a mozgatható elem az ugrási célpontot, a dragover esemény, tűz, folyamatosan tüzelni, amíg a mozgatható elem húzta az ugrási célpontot.
Ha a felhasználó ismét kihúzza a húzható objektumot a cseppcélból ,akkor adragleave esemény ki van rúgva.
Ha a felhasználó eldobja a húzható objektumot a cseppcélra ,akkor adrop esemény ki van rúgva.,
Drag and Drop Event Example
itt van egy példa, amellyel játszhat. Próbálja meg a HTML5 logót a csepp célpontra húzni, hogy megnézze, mi történik. Próbálja meg mind a képet eldobni, mind pedig újra kihúzni.
dragend:
dragenter:
dragover:
dragleave:
drop:
drag and drop code
vessünk egy pillantást a drag and drop események kezelésére., Látni, hogy először létrehozunk egy <img> elemet, amelyet húzhatunk. Itt van a HTML kódot, hogy:
<img src="http://tutorials.jenkov.com/html5/..." draggable="true">
Ha van egy húzható elem szükségünk van egy csepp cél. A<div> elem:
<div style="width: 200px; height: 200px;">Drop here</div>
miután megvan a húzható elem és a csepp célelem, csatolnunk kell az eseményhallgatókat., Itt van a JavaScript kódot, hogy:
a dragStart() függvényhívások event.dataTransfer.setData() annak érdekében, hogy az adatok átvitele a csepp cél, amikor az elem leesett. Bármilyen adatra van szüksége a csepp művelet megfelelő befejezéséhez, állítsa be itt. Beállítja mind az adatokat, mind a mime típusát.
a dragOver () és drop()az eseménykezelők mind a event.preventDefault() – t hívják, mind pedig hamisat. Ez azért szükséges, hogy a drag and drop megfelelően működjön., Előfordulhat, hogy a böngészőnek valamilyen alapértelmezett drag and drop viselkedése van, amelyet le kell tiltania a kód működéséhez.
vegye figyelembe azt is, hogy adrop() eseménykezelő funkció adragStart() adatkészletet olvassa aevent.dataTransfer.getData()híváson keresztül. Az adatok mime típusát paraméterként adja át annak megfelelő kibontásához.
Ez minden, ami szükséges, hogy végre drag and drop HTML5. Tudod, hogy ez egy kicsit vizuálisan kellemes, bár, mint látni fogjuk, a következő részben.,
vizuális visszajelzés
használhatja a drag and drop eseménykezelő funkciókat, hogy a felhasználó explicit vizuális visszajelzést kapjon.
először is megjelölheti a vonszolt elemet, hogy a felhasználó láthassa, melyik elemet húzza. Ha több elem ugyanúgy néz ki, és mindegyik húzható, akkor jó, ha a felhasználó látja, hogy melyik vonszolja. Ezt a dragstart eseményre válaszul teheti meg. Itt van egy példa:
miután a húzás véget ér, újra el akarjuk távolítani a szegélyt., Ez a dragend eseményre adott válaszként történik. Így történik:
most a felhasználó vizuális visszajelzést kap arról,hogy melyik elemet húzza.
azt is meg akarjuk mutatni a felhasználónak, hogy le lehet dobni a húzható elemet, amikor az áthúzódik a csepp cél fölé. Ismét megváltoztatjuk az elem határát. Ezt a dragenter, dragleave és drop eseményekre reagálva tesszük., Itt van, hogy ez történik:
most a határ a csepp cél lesz zöld, szaggatott, amikor a húzható elem húzzák rajta. A határ eltávolításra kerül, ha a húzható elemet ismét kihúzzák, vagy ha az elem a cseppcélra esik.
a fenti példa nem mutatta a dragOver() eseménykezelő funkciót, de győződjön meg róla, hogy hozzáadja az alapértelmezett böngésző viselkedésének megakadályozása érdekében.,
itt található a teljes kód a vizuális visszajelzés hozzáadása után:
a DataTransfer objektum, effectsAllowed, dropEffect and setDragImage ()
a DataTransfer objektum használatával növelheti a felhasználónak adott vizuális visszajelzést. A DataTransfer objektumnak 2 attribútuma van, és egy funkciót használhat erre a célra., Ezek a következők:
- effectsAllowed
- dropEffect
- setDragImage()
hozzáférhet a DataTransfer objektumhoz a dragstart és drop esemény objektumok. Itt egy példa dragstart hallgató funkció, amely beállítja, hogy a effectsAllowed ingatlan a DataTransfer tárgy:
A effectsAllowed ingatlan által használt böngésző módosításához az egér kurzor megmutatja, hogy milyen műveletet végezni, ha ráhúzza egy elem., Általában az egérmutató megváltozik, amikor a vonszolt elem egy csepp cél felett van. Korábban nem. Érvényes értékek a effectsAllowed ingatlan, vagy:
- nincs
- másolás
- áthelyezés
- copyMove
- link
- linkMove
- copyLink
- minden
- nem inicializált
A dropEffect kellene mutatni, hogy a felhasználó (a kurzor) mi történik, ha az egeret lebeg egy csepp cél, de abban az időben az írás (feb. 2014) úgy tűnik, hogy a böngészők figyelmen kívül hagyják ezt., A dropEffect tulajdonság érvényes értékei:
- none
- copy
- link
- move
a setDragImage(image, x, y) függvény használható a böngésző által megjelenített kép beállításához, amikor a felhasználó egy elemet húz. Alapértelmezés szerint a böngésző az eredeti elem félig átlátszó példányát mutatja, de ha más képet szeretne, akkor ezzel a funkcióval más képet állíthat be. Ax ésy tulajdonságok beállíthatók a kép helymeghatározási eltolásainak megjelenítésekor., Alapértelmezés szerint a húzáskép bal felső sarka az egérmutató csúcsán található. Különböző x és y tulajdonságok beállításával ezt megváltoztathatja. Használhat pozitív vagy negatív xés y eltolásokat.
itt van egy kódpélda, amely bemutatja, hogyan állíthat be húzóképet a dragStart() eseményhallgató funkció:
itt van egy példa, amely lehetővé teszi a DataTransfer objektum különböző beállításainak lejátszását., Próbálja meg megváltoztatni aeffectsAllowed képet, majd húzza át a képet, majd nézze meg, mi történik, ha a HTML5 logót lefelé húzza adiv legördülő cél fölé.
fájlokat húzhat a böngészőbe
fájlokat húzhat a böngészőbe a fájlrendszerből, és elolvashatja a fájl nevét és tartalmát vonszolt fájlokat JavaScript. Ezt a HTML5 Fájl API-n keresztül teheti meg., Itt van egy csepp cél hallgató, amely érzékeli a fájl nevét a húzta fájl:
var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i Notice how the
function does not call the function, but instead accesses the property of the . The property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon). You can read more about how to access the dragged files in my HTML5 file API tutorial.