HTML Drag and Drop Az interfészek lehetővé teszik az alkalmazások számára, hogy a böngészők fogd és vidd funkcióit használják. A felhasználó választhat vonszolható elemeket egérrel, húzza az elemeket a leejthető elemet, és dobja el őket az egérgomb felengedésével. Átlátszó ábrázolása a vonszolható elemek követik a mutatót a húzási művelet során.

Webhelyek, bővítmények és XUL-alkalmazások esetén személyre szabhatja, hogy mely elemek válhatnak belőle vonszolható, a visszajelzés típusa a vonszolható elemek termelnek, és a leejthető elemeket.

Ez a HTML Drag and Drop áttekintése tartalmazza az interfészek leírását, az alkalmazáshoz a drag and drop támogatás hozzáadásának alapvető lépéseit, valamint az interfészek interoperabilitási összefoglalóját.

Húzza az eseményeket

esemény	Eseménykezelőn	Kigyullad, amikor…
húzza	ondrag	…a húzott elem(elem- vagy szövegkijelölés) húzásra kerül.
dragend	ondragend	…a húzási művelet befejeződik (például az egérgomb felengedése vagy az Esc billentyű lenyomása; lásd: Húzás befejezése .)
dragenter	ondragent	…a húzott elem érvényes ledobási célt ad meg. (Lásd: Leejtési célok megadása.)
dragexit	ondragexit	…egy elem már nem a húzási művelet közvetlen kiválasztási célpontja.
dragleave	ondragleave	…a húzott elem érvényes ledobási célt hagy maga után.
dragover	ondragover	…a húzott elemet néhány száz ezredmásodpercenként egy érvényes ledobási cél fölé húzzák.
dragstart	ondragstart	…a felhasználó elkezd húzni egy elemet. (Lásd: Húzási művelet indítása.)
csepp	csepp	…egy elemet érvényes ledobási célpontra dobtak. (Lásd: Leejtés végrehajtása.)

Jegyzet: Sem dragstart, sem dragend események nem indulnak el, amikor egy fájlt áthúznak a böngészőbe az operációs rendszerből.

Interfészek

Az alapok

Ez a szakasz összefoglalja azokat az alapvető lépéseket, amelyekkel a fogd és vidd funkciót hozzáadhatja egy alkalmazáshoz.

azonosítani, mi az vonszolható

Elem készítése vonszolható megköveteli a draggable attribútum és az ondragstart globális eseménykezelő hozzáadását, amint az a következő kódmintában látható:

Ez az elem húzható.

További információért lásd:

kezelni a cseppet hatás

A drop esemény kezelője szabadon feldolgozhatja a húzási adatokat alkalmazás-specifikus módon.

Az alkalmazások általában a getData() metódust használják a húzóelemek lekérésére, majd azok megfelelő feldolgozására. Ezenkívül az alkalmazás szemantikája a függvény értékétől függően eltérő lehet

A Drag and Drop funkció segíthet az iPad teljesítményének növelésében. Így használhatja.

Így áthelyezhet egy fájlt az egyik felhőalapú tárolási szolgáltatásból a másikba, szöveget másolhat a Safariból egy szövegszerkesztő alkalmazásba, hogy árajánlatot adjon hozzá, vagy biztonsági másolatot készíthet bizonyos fényképekről egy fájltároló alkalmazásba.

Fényképek, fájlok és szövegek áthúzása

1. Érintse meg és tartsa lenyomva azt a fényképet, fájlt vagy kiemelt szöveget, amelyet át szeretne húzni egy másik alkalmazásba.

2. Húzza az elemet a kívánt helyre ebben az alkalmazásban vagy egy másik olyan alkalmazásban, amelyet a Slide Over vagy Split View módban nyitott meg, majd engedje el.

Több fénykép vagy fájl áthúzása egyszerre

1. Érintse meg és tartsa lenyomva az egyik áthúzni kívánt fényképet vagy fájlt.

2. Az aktuális elem húzása közben koppintson egy másik fényképre vagy fájlra, amelyet szintén át szeretne húzni. Ismételje meg annyi elemmel, amennyit el szeretne helyezni.

3. Húzza az összes kijelölt objektumot a kijelölt helyre egy másik alkalmazásban, amelyet a Slide Over vagy Split View módban nyitott meg, és engedje el őket.

Szöveg áthúzása egyik alkalmazásból a másikba

1. Érintse meg és tartsa lenyomva a szöveg azon részét, amelyet húzni szeretne a kijelöléséhez.

2. A kijelölési pontokkal jelölje ki a húzni kívánt szöveg többi részét.

3. Nyomja meg és tartsa lenyomva a kiválasztott szöveget.

4. Húzza a szöveget az alkalmazásba, ahová el szeretné helyezni, és engedje el.

Hogyan változtassuk meg egyszerre több alkalmazás ikonjának helyzetét a "Drag and Drop" segítségével

Míg a legtöbb iOS drag and drop funkció csak az iPaden működik, ez a trükk valójában iPhone és iPad készüléken is működik. Ez lehetővé teszi az alkalmazások helyének rendszerezését a kezdőképernyőn a segítségével « Húzza és vidd", ahelyett, hogy egyenként mozgatná őket.

1. Érintse meg és tartsa lenyomva az áthelyezni kívánt alkalmazás ikonját a kezdőképernyőn.

2. Koppintson azokra a további alkalmazásokra, amelyeket szintén át szeretne helyezni.

3. Húzza ezeket az alkalmazásokat arra az oldalra vagy mappába, ahová szeretné őket helyezni, és dobja el őket.

182

Ebben a példában kijelölünk egy div elemet, és annak meghívásával mozgathatóvá tesszük draggable() metódus. Ahogy az alábbi ábrán is látható, a megnyitott dokumentumban az elem elfoglalja a megszokott pozícióját, de ezt követően az egérmutatóval a böngészőablakban tetszőleges helyre mozgatható:

A fogd és vidd funkció önmagában is hasznos, de még hasznosabb, ha a következőkben ismertetett Dropppable interakcióval együtt használjuk.

A húzható interakció kizárólag meghatározott HTML-jelölések és CSS-stílusok használatával valósul meg. Ez azt jelenti, hogy ez a funkció szinte minden böngészőben működik, de az ezzel felruházott elemek nem lesznek képesek együttműködni az operációs rendszerek hasonló natív fogd és vidd funkcióival.

A HTML5 specifikáció által meghatározott fogd és vidd műveleteket általában natív operációs rendszer mechanizmusok segítségével valósítják meg. Ha a jQuery UI fogd és vidd mechanizmust használja, a legjobb, ha letiltja a HTML5 megfelelőit az ütközések elkerülése érdekében. Ehhez állítsa a dokumentum törzselemének draggable attribútuma false értékre.

Húzható interakció testreszabása

Számos testreszabási lehetőség létezik a húzható interakcióhoz. A következő szakaszokban tárgyalt legfontosabb tulajdonságokat az alábbi táblázat foglalja össze:

Húzható interakciós tulajdonságok

Ingatlan	Leírás
tengely	A mozgást bizonyos irányokra korlátozza. Az alapértelmezett érték false, ami azt jelenti, hogy nincs korlátozás, de megadhatja az "x" értéket (csak az x tengely mentén mozog) vagy az "y" értéket (csak az y tengely mentén mozog)
visszatartás	A lebegő elem helyét a képernyő egy meghatározott területére korlátozza. A támogatott értéktípusok leírása az alábbi táblázatban található a megfelelő példával együtt. Az alapértelmezett érték false, ez azt jelenti, hogy nincs korlátozás
késleltetés	Meghatározza, hogy egy elemet mennyi ideig kell húzni, mielőtt elmozdulna. Az alapértelmezett érték 0, ami azt jelenti, hogy nincs késleltetés
távolság	Megadja azt a távolságot, amelyet a felhasználónak el kell húznia egy elemet a kiindulási helyétől, mielőtt ténylegesen elmozdulna. Az alapértelmezett érték 1 pixel
rács	Kényszeríti az áthelyezett elem kötődését a rácscellákhoz. Az alapértelmezett érték false, ami azt jelenti, hogy nincs kötés

A mozgási irányok korlátozása

Számos módon korlátozhatja egy elem mozgását bizonyos irányokra. Ezek közül az első az tengely opció használata, amely lehetővé teszi a mozgás irányának az X vagy Y tengelyre való korlátozását. Az alábbiakban egy példa látható:

...

Példa futtatása

Ebben a példában definiálunk két div elemet, kijelöljük őket a jQuery segítségével, és meghívjuk a draggable() metódust. Ez a metódus egy olyan objektumot ad át, amely eleinte korlátozza mindkét div x irányú mozgását. Ezután a jQuery filter() metódus alkalmazásával kiválaszthatjuk a dragV elemet anélkül, hogy a jQuery újra megkeresné a teljes dokumentumot, és beállíthatjuk egy másik engedélyezett mozgásra. irányban - az Y tengely mentén Így olyan dokumentumot kapunk, amelyben az egyik div elem csak függőleges irányban, a másik pedig csak vízszintes irányban húzható. Az eredmény az ábrán látható:

Egy elem mozgatásához megengedett terület korlátozása

Korlátozhatja a képernyő azon területét is, ahol egy elemet húzhat. Ehhez az elszigetelés opciót használják. Az ebben az opcióban megadható értékformátumok leírása az alábbi táblázatban található:

Az alábbiakban látható egy példa az elszigetelési opció használatára:

...

Példa futtatása

Ebben a példában mindkét elem mozgásra van kényszerítve, így csak a szülőelemen belül lehet húzni, ami egy fix méretű div elem. Az egyik lebegő divnek van egy további megkötése az tengely opcióval, hogy csak vízszintesen mozoghat a szülőjén belül. Az eredményt az ábra szemlélteti:

Egy elem rácscellákra való áthelyezésének lehetőségének korlátozása

A rács opció lehetővé teszi az áthelyezett elem rácscellákhoz való kötésének beállítását. Ez a beállítás két elemből álló tömböt fogad el, amely a rácscellák szélességét és magasságát adja meg képpontokban. Az alábbiakban látható egy példa a rácsopció használatára:

...

Példa futtatása

Ebben a példában a rács 100 pixel szélesre és 50 képpont magasra van beállítva. Amikor egy elemet húz, az egyik (láthatatlan) cellából a másikba "ugrik". A csattanó effektus kiválóan használható az interakciós funkciókhoz, de ezt nehéz képernyőképekkel átadni.

A szabad mozgás tengelyének 1-re állításával csak egy irányba hozhat létre rasztereffektust. Ha például a rácsbeállítást értékre állítja, az elem vízszintes mozgáskor 100 képpont széles rácscellákra fog illeszkedni, függőlegesen azonban szabadon mozog. .

Utazási késés

Két lehetőség van, amelyek lehetővé teszik egy lebegő elem húzásának késleltetését. A késleltetés opcióval beállíthatja ezredmásodpercben azt az időt, ameddig a felhasználónak el kell húznia az egérmutatót, mielőtt az elemet ténylegesen áthelyezné. Egy másik késleltetési módot biztosít a távolság opció, amely azt a távolságot adja meg pixelben, ameddig a felhasználónak el kell húznia az egérmutatót, mielőtt egy elem követné.

Az alábbiakban látható egy példa mindkét beállítás használatára:

...

Példa futtatása

Ebben a példában két lebegő elem van, amelyek közül az egyik a késleltetés, a másik pedig a távolság opcióval van beállítva.

A késleltetési beállítás által megadott késleltetés esetén a felhasználónak a megadott ideig húznia kell, mielőtt ténylegesen mozgatná az elemet. Ebben a példában ennek a résnek az időtartama 1000 ms. Ezalatt az egeret nem kell mozgatni, de az egérgombot a teljes késleltetési idő alatt lenyomva kell tartani, ezután az egér mozgatásával mozgatható az elem. A késleltetési idő letelte után az áthelyezett elem az egérmutató pozíciójába kerül, a korábban tárgyalt rács-, régió- és tengelyopciók által támasztott megkötések függvényében.

Hasonló hatású a távolság opció is, de ebben az esetben a felhasználónak az egérmutatót legalább a megadott számú képponton át kell húznia bármely irányba az elem kiindulási helyétől. Az áthelyezett elem ezután a mutató aktuális helyére ugrik.

Ha mindkét beállítást ugyanarra az elemre alkalmazza, akkor az áthelyezett elem nem fog elmozdulni mindaddig, amíg mindkét késleltetési feltétel nem teljesül, pl. amíg az elem húzási kísérlete a megadott ideig tart, és amíg az egérmutató el nem mozgatja a megadott számú képpontot.

Húzható interakciós módszerek használata

A húzható interakcióhoz definiált összes metódus része a widgetekben már látott alapvető metódusok halmazának. A húzható interakcióra jellemző módszerek nem állnak rendelkezésre, ezért nem foglalkozunk velük részletesen. Az elérhető módszerek listája az alábbi táblázatban látható:

Húzható interakciós események használata

A húzható interakció támogatja az események egyszerű halmazát, amelyek értesítik, ha egy elemet húznak. Ezeket az eseményeket az alábbi táblázat írja le:

A widget eseményekhez hasonlóan ezekre az eseményekre is lehet reagálni. Az alábbiakban látható egy példa a start és stop események kezelésére:

...

Példa futtatása

Ez a példa a start és stop eseményeket használja egy elem szövegtartalmának megváltoztatására a húzási folyamat során. Ez az előny abból fakad, hogy a Draggable interakciót teljes egészében HTML és CSS segítségével valósítják meg: a jQuery segítségével módosíthatja a lebegő elem állapotát, még akkor is, amikor az a képernyőn mozog.

A Dropppable interakció használata

Egyes helyzetekben elegendő lehet egy elem húzása önmagában, de ez a leghasznosabb, ha a Dropppable interakcióval együtt használjuk.

Azok az elemek, amelyekre az eldobható interakciót alkalmazták (elemek elfogadása), képesek lesznek elfogadni a húzható interakcióval létrehozott eldobható elemeket.

A fogadó elemek a következővel jönnek létre droppable() metódus, de a hasznos funkciók eléréséhez eseménykezelőket kell létrehoznia az ilyen interakcióhoz meghatározottak közül. Az elérhető eseményeket az alábbi táblázat mutatja:

Eldobható interakciós események

Esemény	Leírás
teremt	Akkor fordul elő, ha egy elemre eldobható interakciót alkalmaznak
aktiválja	Akkor fordul elő, amikor a felhasználó elkezd húzni egy lebegő elemet
deaktiválja	Akkor fordul elő, amikor a felhasználó abbahagyja a lebegő elem húzását
felett	Akkor fordul elő, ha a felhasználó egy lebegő elemet húz a fogadó elem fölé (de feltéve, hogy az egérgombot még nem engedték fel)
ki	Akkor fordul elő, amikor a felhasználó egy lebegő elemet a fogadó elemen kívülre húz
csepp	Akkor fordul elő, ha a felhasználó lebegő elemet hagy a fogadó elemen

Az alábbiakban látható egy példa egy egyszerű fogadóelem létrehozására, amely egyetlen csepp eseménykezelővel rendelkezik:

...

Példa futtatása

Ebben a példában egy div elemet adunk a dokumentumhoz, amelynek szöveges tartalmát a "Hagyja itt" karakterlánc képviseli. Kijelöljük ezt az elemet a jQuery segítségével, és meghívjuk a droppable() metódust, átadva neki egy beállítási objektumot, amely meghatározza a drop esemény kezelőjét. A válasz erre az eseményre a lebegő elem szövegének megváltoztatása a text() metódussal.

Az ebben a példában létrehozott fogd-és-vidd interakció a legegyszerűbb, de hasznos kontextust biztosít a húzható és eldobható interakciók együttműködésének elmagyarázásához. Az elemek húzása és ledobása folyamatának különböző szakaszait az ábra szemlélteti:

Mindez nagyon egyszerűnek tűnik. A mozgatandó elemet addig húzzuk, amíg a fogadó elem fölé nem kerül, majd elengedjük. Az elejtett elem ott marad, ahol hagyta, és szövegtartalma megváltozik az eldobási esemény hatására. A következő szakaszok bemutatják, hogyan használhat más eldobható interakciós eseményeket a felhasználói élmény javítására.

Cél fogadó objektum kiemelése

Az aktiválási és deaktiválási események használatával kiemelheti a célfogadó objektumot, amikor a felhasználó elkezdi az elem húzását. Ez az ötlet sok esetben nagyon gyümölcsöző, mert megbízható jelzést ad a felhasználónak arról, hogy mely elemek képezik a drag-and-drop modell részét. A vonatkozó példa az alábbiakban látható:

... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#húzható").text("Eldobható" ") ), aktiválja: function() ( $("#droppable").css(( keret: "közepes dupla zöld", backgroundColor: "lightGreen" )); ), deaktiválja: function() ( $("#droppable" ").css("border", "").css("háttérszín", ""); ) )); )); ... Futtassa a példát

Amint a felhasználó elkezdi húzni az elemet, a fogadó elemünkhöz kapcsolódó aktiválási esemény elindul, a kezelő függvény pedig a css() metódussal módosítja az elem szegélyét és a háttérszín CSS tulajdonságait. Ennek eredményeként a cél fogadó elem kiemelésre kerül, jelezve a felhasználónak, hogy kapcsolat van közte és az áthelyezett elem között.

A deaktiválási esemény a CSS tulajdonságértékek eltávolítására szolgál a fogadó elemből, és visszaállítja azt, amint a felhasználó elengedi az egérgombot. (Ez az esemény akkor aktiválódik, amikor egy elem húzása leáll, függetlenül attól, hogy a húzott elem a fogadó elemen maradt-e vagy sem.) Ezt a folyamatot az ábra szemlélteti:

Elemek átfedés kezelése

A drag-and-drop technológia továbbfejleszthető, ha eseménykezelést adunk hozzá. A túllépés akkor következik be, ha az áthelyezett elem 50%-a a fogadó elem bármely része felett van. Az out esemény akkor aktiválódik, amikor a korábban átfedő elemek már nem fedik át egymást. Az alábbiakban látható egy példa ezekre az eseményekre adott válaszra:

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#húzható").text("Droppable") ) , aktiválja: function() ( $("#droppable").css(( keret: "közepes dupla zöld", backgroundColor: "lightGreen" )); ), deaktiválja: function() ( $("#droppable"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( border: "közepes dupla piros", backgroundColor : "piros" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Példa futtatása

Itt ugyanazok a kezelő függvények használatosak, mint az előző példában, de ebben az esetben az over and out eseményekhez kapcsolódnak. Ha a lebegő elem legalább 50%-a átfedésben van a fogadóelemmel, akkor bekereteződik, és a háttérszíne megváltozik, ahogy az az ábrán látható:

Ezt az 50%-os határt tűrésküszöbnek nevezzük, amely a fogadó elem létrehozásakor állítható be, ahogy az alábbiakban látható lesz.

Eldobható interakciós beállítás

Az eldobható interakciónak számos tulajdonsága van, amelyeket módosíthat a viselkedése testreszabása érdekében. Ezeket a tulajdonságokat az alábbi táblázat tartalmazza:

Eldobható interakciós tulajdonságok

Ingatlan	Leírás
Tiltva	Ha ez a beállítás igaz, akkor az eldobható interakciós funkció kezdetben le van tiltva. Az alapértelmezett érték false
elfogad	Szűkíti azokat a lebegő elemeket, amelyekre a fogadó elem reagál. Az alapértelmezett érték a *, bármely elemnek megfelel
activeClass	Meghatároz egy osztályt, amely az aktiválási eseményre válaszul lesz hozzárendelve, és a deaktiválási eseményre válaszul el lesz távolítva
hoverClass	Meghatároz egy osztályt, amely egy túllépésre válaszul lesz hozzárendelve, és egy out eseményre válaszul eltávolítható.
megértés	Megadja az átfedés minimális mértékét, amelynél a túllépés bekövetkezik

A megengedett lebegő elemek korlátozása

Az elfogadás opció használatával korlátozhatja azon eldobható elemek készletét, amelyeket az eldobható együttműködési funkcióval rendelkező elemek fogadnak el. Az elfogadás opció értékének szelektornak kell lennie. Az esemény eredményeként eldobható interakciók csak akkor fordulnak elő, ha az áthelyezett elem egyezik a megadott szelektorral. A vonatkozó példa az alábbiakban látható:

...

Példa futtatása

Ebben a példában két lebegő elem található drag1 és drag2 azonosítókkal. Elfogadó elem létrehozásakor az elfogadás opciót használjuk, amellyel jelezzük, hogy csak a drag1 elem lesz elfogadható lebegő elem.

A drag1 elem húzásakor ugyanazt a hatást fogja látni, mint az előző példákban. Az aktiválási, deaktiválási, túllépési és kilépési események a megfelelő időpontokban aktiválódnak a fogadó elemen. Ugyanakkor, ha olyan drag2 elemet húz, amely nem egyezik az elfogadás paraméterben megadott szelektorral, akkor ezek az események nem indulnak el. Ez az elem szabadon mozgatható, de a fogadó elem nem fogadja el.

Jegyezze meg a változást egy elfogadható lebegő elem kiválasztásában, amelyen a text() metódus meghívható. Ha csak egy lebegő elem volt a dokumentumban, akkor ehhez elég volt az id attribútum:

Drop: function() ( $("#draggable").text("Dropped") ),

Ebben a példában két lebegő elem van, és az id attribútummal történő kijelölés nem hozza meg a kívánt eredményt, mivel a szöveg ebben az esetben mindig ugyanabban a lebegő elemben változik, függetlenül attól, hogy melyiket fogadja el a fogadó elem.

A megoldás az, hogy a jQuery UI által biztosított felhasználói felület objektumot további argumentumként használjuk minden eseménykezelőhöz. Az ui objektum húzható tulajdonsága egy jQuery objektumot ad vissza, amely tartalmazza azt az elemet, amelyet a felhasználó a célelemre húz, vagy megpróbál elejteni, lehetővé téve a kívánt elem kiválasztását az alábbiak szerint:

Drop: function(event, ui) ( ui.draggable.text("Dropped") ),

Az átfedési küszöb módosítása

Alapértelmezés szerint az over esemény csak akkor aktiválódik, ha az áthelyezett elem legalább 50%-a átfedi a fogadó elemet. Ennek a küszöbátfedésnek a mértéke a tűrés opcióval módosítható, amely az alábbi táblázatban látható értékeket veheti fel:

Az általam leggyakrabban használt két érték, az illeszkedés és az érintés az, ami a leginkább értelmes a felhasználók számára. Az illesztési értéket akkor használom, amikor a húzott elemnek a fogadó elem azon területén kell maradnia, ahová mozgatták, és az érintési értéket, amikor a húzott elemnek vissza kell térnie az eredeti helyzetébe (példa később lesz). Az alábbiakban látható egy példa az illeszkedési és érintési paraméterek használatára:

A klón érték arra utasítja a jQuery UI-t, hogy készítsen másolatot a lebegő elemről annak teljes tartalmával együtt, és használja az eredményt segédelemként. Az eredmény az ábrán látható:

A segédelem eltávolításra kerül, amikor a felhasználó elengedi az egérgombot a mozgatandó elem felett, így a mozgatandó elem és a fogadó elem az eredeti helyén marad.

Az ábrán látható módon az eredeti lebegő elem a helyén marad, és csak a segédelem mozog a képernyőn az egérmutatót követve. Ha az áthelyezett elem mérete nagy, mint a példánkban, akkor az lefedi a dokumentum többi elemét, így a felhasználó számára nehéz lesz még a fogadó elem helyzetét is követni. Ezt a problémát úgy lehet megoldani, hogy a helper opció értékeként egy függvényt adunk meg, amint az az alábbi példában látható:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#kosár").droppable(( activeClass: "aktív", hoverClass: "hover" )); )); ... Futtassa a példát

Amikor a felhasználó elkezd húzni egy elemet, a jQuery UI meghívja a helper paraméter által megadott függvényt, és a visszaadott elemet drag objektumként használja. Ebben az esetben a jQuery-t használom az img elem létrehozásához. Az eredmény az ábrán látható:

A kis kép a lebegő elem helyőrzőjeként működik, így sokkal könnyebben nyomon követhető a dokumentum többi eleme.

Az UI objektum, amelyet a jQuery UI átad az eldobható interakciós eseményeknek, egy helper tulajdonságot tartalmaz, és ez a tulajdonság használható a helper elem manipulálására a húzás közben. Az alábbiakban egy példa látható ennek a tulajdonságnak az over and out eseményekkel együtt történő használatára:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#kosár").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: function(event, ui) ( ui.helper.css("border", "") ) )); )); ...

Itt az over and out események és az ui.helper tulajdonság egy szegély megjelenítésére szolgál a helper elem körül, amikor az átfedi a host elemet. Az eredmény az ábrán látható:

Illessze az elemek széléhez

Használva snap opciók el lehet érni, hogy a mozgatott elem "vonzódjon" azon elemek széleihez, amelyek mellett elhalad. Ez az opció egy szelektort vesz értékeként. A lebegő elem minden olyan elem széléhez illeszkedik, amely megfelel a megadott választónak. Az alábbiakban látható egy példa a snap opció használatára:

Példa futtatása

Amikor egy mozgatható elem megközelíti az egyik illeszkedő elemet, úgy "húzódik" hozzá oly módon, hogy a szomszédos élei összeérnek. Egy ilyen kötéshez bármely elemet kiválaszthat, nem csak a fogadó elemet. Ebben a példában hozzáadtam egy div elemet, és a snap opciót olyan értékre állítottam, amely kijelöli az adott elemet a dokumentumban, valamint a fogadó elemet.

Van néhány albeállítás, amelyek segítségével finomhangolhatja az elemek viselkedését a rögzítéssel kapcsolatban. Az egyik az snapMode opciót. A kötés típusának megadására használható. A következő értékek megengedettek: belső(pattintsa az elemek belső széléhez), külső(pattintsa az elemek külső széléhez) és mindkét(minden élhez rögzítés; alapértelmezett).

snapTolerance opció lehetővé teszi annak megadását, hogy a lebegő elemnek milyen messze kell közelednie a célelem széléhez, mielőtt megtörténik. Az alapértelmezett érték 20, ami 20 pixelt jelent. A példa 50-es értéket használ, ami egy nagyobb távolságban lévő horgonynak felel meg. Nagyon fontos ehhez az opcióhoz a megfelelő értéket választani. Ha a snapTolerance opció értéke túl alacsony, akkor előfordulhat, hogy a felhasználó nem veszi észre a snapping effektust, és ha túl magas, akkor az áthelyezett elem váratlanul ugrálni kezd, és a távoli elemekhez pattan.

Technológia használata drag and drop (drag and drop) lehetővé teszi a felhasználó számára, hogy különböző objektumokat helyezzen át egyikről a másikra, például az egyik lista elemeit a másikra. Ehhez két vezérlőt kell használnia: egy mosogatót és egy forrást. A vevő az az objektum, amely a forrásobjektumot (mozgatható objektumot) fogja fogadni.

Az objektumok mozgása során bekövetkező eseményeket az alábbiakban felsoroljuk, bekövetkezésük sorrendjében.

OnStartDrag(TStartDragEvent típusa) - a forrásobjektum generálja a művelet elején. Az eseménykezelőnek átadott paraméterek: DragObject fogadó objektum (TDragObject típus), Source objektum (TObject típus).

OnDragOver(TDragOverEvent típusú) - célobjektumot hoz létre, amikor egy lebegő objektumot helyeznek fölé. Az eseménykezelőnek átadott paraméterek: Küldő fogadó objektum (TObject típus), Forrásforrás objektum (TObject típus), Állapot mozgási állapot (TDragState típus), X és Y (egész típus) - az egérmutató aktuális koordinátái, Accept (logikai típusú) ) a költözési művelet megerősítésének jele. A mozgás állapota egyértelművé teszi, hogy a mozgatott tárgy a vételi területen van-e, mozog-e benne, elhagyta-e. Az átadott paraméterek lehetővé teszik a vevő objektum számára a forrásobjektum elfogadását vagy elutasítását. Az Accept paraméter Trye értékre van állítva, ha az áthelyezési műveletet elfogadják, ellenkező esetben False.

onDragDrop (TDragDropEvent típus) – A célobjektum emeli fel, amikor a húzott objektumot ráejtik. Az eseménykezelő átadja az egérmutató, a küldő fogadó objektum (TObject típus) és az eredeti Source mozgásobjektum (TObject típus) aktuális koordinátáit.

onEndDrag (EndDragEvent típusa) – Felemelkedik, amikor egy húzási művelet véget ér. Annak a pontnak az X és Y koordinátái, ahol a küldő forrásobjektum és a célvevő objektum átadásra kerül az eseménykezelőnek.

A drag and drop létrehozásához elegendő két eseményt megvalósítani: az OnDragDrop-ot és az OnDragOver-t úgy, hogy a DragMode tulajdonságot dmAutomatic értékre állítjuk. Ellenkező esetben a mozgatási művelet kezdetét, a BeginDrag metódust a programozónak kell kódolnia.

Az anyag összevonásához a következő alkalmazást hozzuk létre. Helyezzen egy Panel komponenst az űrlapra. Állítsa az Object Inspector DragMode tulajdonságát dmAutomatic értékre. Válassza ki az űrlapobjektumot, és használja az Objektumfelügyelőt a következő események létrehozásához:

Eljárás TForm1.FormDragOver(Küldő, Forrás: TObject; X, Y: Integer; Állapot: TDragState; var Accept: Boolean); kezdődik ha Forrás = Panel1 then Accept:= Igaz else Accept:= False; vége; eljárás TForm1.FormDragDrop(Sender, Source: TObject; X, Y: Integer); beginPanel1.Left:=X; Panel1.Top:=Y; vége;

Most az alkalmazás futtatásával és az egér gombjának a panel feletti megnyomásával mozgathatjuk a panelobjektumot az egész űrlapon.

Konklúzió: megismerkedtünk a technológiával drag and drop(húzd és vidd) és alkalmazta a gyakorlatban.