A VCL-könyvtárhoz a Borland megvalósította a Drag&Drop interfész saját verzióját (a fordításban "drag"). Ez a felület belső - az űrlapon belül bármilyen Delphi-vezérlőt küldhet és fogadhat "(kivéve magát az űrlapot). A megfelelő Windows API-funkciók használata nélkül valósul meg - ezeket kell használni, amikor más feladatokkal való kommunikációt húzással szervezik. .
Kattintás bal gomb vigye az egeret a vezérlő fölé, bármely más elemre "húzhatjuk". A programozó szemszögéből ez azt jelenti, hogy a kulcs elhúzásának és elengedésének pillanataiban bizonyos események generálódnak, amelyek minden szükséges információt továbbítanak - egy mutatót a húzott objektumra, az aktuális kurzor koordinátáit stb. Az esemény vevő az elem amelyen a Ebben a pillanatban a kurzor található. Az ilyen esemény kezelőjének meg kell mondania a rendszernek, hogy az adott vezérlő elfogadja-e a "küldést" vagy sem. Ha a gombot elengedjük a vevővezérlő felett, a vevő készenlététől függően még egy vagy két esemény indul el.
MégseHúzás Megszakítja az aktuális fogd és vidd vagy drag and dock műveletet.
Funkció FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;
A függvény az alaposztály egy objektumát adja vissza TControl , amely a képernyő pozíciójára vonatkozik a Pos paraméter által megadott koordinátákkal. Ez a funkció a drag and drop vagy drag and dock művelet lehetséges címzettjének meghatározására szolgál. Ha a megadott pozícióhoz nincs ablakvezérlő, akkor a függvény visszatér nulla . Az AllowDisabled paraméter határozza meg, hogy a rendszer figyelembe veszi-e a letiltott objektumokat.
Funkció IsDragObject(Küldő: TObject ): Logikai ;
A függvény határozza meg, hogy a Sender paraméterben megadott objektum az osztály leszármazottja-e TDragObject . Ez a funkció Source paraméterként használható az OnDragOver és OnDockOver eseménykezelőben annak meghatározására, hogy a húzott objektum elfogadásra kerül-e. Szintén funkció IsDragObjectSource paraméterként használható az OnDragDrop és OnDockDrop eseménykezelőben a húzott objektum helyes értelmezése érdekében.
DragMode, DragCursor tulajdonságok, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag metódusok, Accept paraméter
Az információk egyik objektumról a másikra egérrel való áthúzásának folyamatát széles körben használják a Widowsban. Áthelyezhet fájlokat a mappák között, áthelyezheti magukat a mappákat stb.
A drag and drop folyamathoz kapcsolódó összes tulajdonság, metódus és esemény a TControl osztályban van meghatározva, amely az összes Delphi vizuális összetevő szülője. Ezért minden alkatrészre közösek.
A húzás kezdetét a DragMode tulajdonság határozza meg, amely beállítható tervezési időpontban, vagy programozottan a dmManual vagy a dmAutomatic értékkel egyenlő. A dmAutomatic (automatic) értéke meghatározza a húzási folyamat automatikus indulását, amikor a felhasználó az egérgombot az összetevőre kattint. Ebben az esetben azonban az egérgomb megnyomásával kapcsolatos OnMouseDown esemény egyáltalán nem fordul elő ennél az összetevőnél.
A komponensek átvitelére és fogadására szolgáló felület már régen megjelent. Interakciót biztosít két vezérlő között az alkalmazás végrehajtása során. Ebben az esetben minden szükséges művelet elvégezhető. A megvalósítás egyszerűsége és a fejlesztés kora ellenére sok programozó (főleg a kezdők) ezt a mechanizmust homályosnak és egzotikusnak tartja. A Drag-and-Drop használata azonban nagyon hasznos és könnyen megvalósítható lehet. Most ezt ellenőrizzük.
A mechanizmus működéséhez két vezérlőt kell ennek megfelelően konfigurálni. Az egyiknek a forrásnak (Source) kell lennie, a másodiknak a vevőnek (Cél). Ebben az esetben a forrás nem költözik sehova, hanem csak így van regisztrálva a mechanizmusban.
Hidd el, elég könnyű átalakítani X,Y koordináták, amelyet az OnDragOver és OnDragDrop események paraméterei űrlapkoordinátákba adtak át.
Dolgozzon azon összetevő bal és felső tulajdonságaival, amely felett a kurzor áll. Mondok egy egyszerű példát. Helyezzen el egy Memo összetevőt az űrlapon, és rendelje hozzá Tulajdonság igazítása alTop érték. Helyezzen egy panelt az űrlapra, állítsa az Align tulajdonságot is alTop értékre, és állítsa a Height tulajdonságot egy kis értékre, mondjuk 6 vagy 7 pixelre. Állítsa a DragMode-ot dmAutomatica-ra, a DragCursor-t pedig crVSplit-re. Helyezzen be egy másik Memo komponenst, és állítsa be az Align to alClient beállítást. Jelölje ki egyszerre mindkét emlékeztetőt, a panelt, és hozzon létre egy közös OnDragOver eseménykezelőt az alábbiak szerint:
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, és árajánlatot adhat hozzá, vagy biztonsági mentés bizonyos fényképeket a fájltároló alkalmazásban.
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 ide Jó helyen ban ben ez az alkalmazás vagy egy másik, amelyet a Slide Over vagy Split View módban nyitott meg, és 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. Érintés további alkalmazások, amit szintén át kell helyezni.
3. Húzza ezeket az alkalmazásokat arra az oldalra vagy mappába, ahová szeretné őket helyezni, és dobja el őket.
Már régóta léteznek JavaScript-függvények, amelyek lehetővé teszik drag & drop felületek létrehozását. De ezek a megvalósítások egyike sem natív a böngészőben. A HTML5-nek megvan a maga módja a drag & drop felületek létrehozására (kis JavaScript segítségével). Ebben a cikkben eláruljuk, hogyan lehet ezt elérni...
Böngésző támogatás
A HTML5 drag & drop funkciót jelenleg az összes főbb asztali böngésző támogatja (beleértve az IE-t is (még az IE 5.5-nek is van részleges támogatása)), de egyik népszerű mobilböngésző sem támogatja.
Drag&Drop események
A drag & drop minden szakaszában különféle események indulnak el, hogy a böngésző tudja, melyik JavaScript-kódot kell végrehajtani. Az események listája:
- dragStart: akkor aktiválódik, amikor a felhasználó elkezdi húzni az elemeket;
- dragEnter: akkor aktiválódik, amikor a húzott elemet először a célelem fölé húzzák;
- dragOver: akkor aktiválódik, amikor az egeret egy elem fölé viszi, miközben a húzás folyamatban van;
- dragLeave: akkor aktiválódik, ha a felhasználó kurzora húzás közben elhagyja az elemet;
- drag: minden alkalommal tüzel, amikor mozgatjuk az egeret, miközben húzzuk az elemünket;
- drop: akkor indul el, amikor a tényleges ejtés végrehajtódik;
- dragEnd: akkor aktiválódik, amikor a felhasználó elengedi az egérgombot egy objektum húzása közben.
Mindezen eseményfigyelők segítségével nagy mértékben szabályozhatja a felület működését.
dataTransfer objektum
Itt történik minden drag&drop varázslat. Ez az objektum tartalmazza a húzási művelet által elküldött adatokat. Az adatok beállíthatók és visszakereshetők különböző utak, amelyek közül a legfontosabbak:
- dataTransfer.effectAllowed=value: az engedélyezett művelettípusokat adja vissza, lehetséges értékek: nincs, másolás, copyLink, copyMove, link, linkMove, move, all and uninicialized.
- dataTransfer.setData(format, data): Adott adatok és formátum hozzáadása.
- dataTransfer.clearData(format): Törli az összes adatot egy adott formátumhoz.
- dataTransfer.setDragImage(elem, x, y): beállítja a húzni kívánt képet, az x és y értékek jelzik, hogy hol legyen az egérkurzor (0, 0 a bal felső sarokban helyezi el).
- data = dataTransfer.getData(format) : Ahogy a neve is sugallja, egy adott formátumhoz tartozó adatokat ad vissza.
Drag&drop példa létrehozása
Most elkezdünk egy egyszerű drag&drop példát létrehozni. Amint látható, van két kis divünk és egy nagy, a kis diveket a nagy belsejébe húzhatjuk, és akár vissza is mozgathatjuk.
Tárgy húzása
Az első dolog, amit tennünk kell, a HTML létrehozása. A diveket húzhatóvá tesszük a draggable attribútummal:
Ha ez megtörtént, meg kell határoznunk egy JavaScript függvényt, amely azonnal elindul, amint elkezdjük mozgatni ezt az elemet:
Függvény dragStart(ev) ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Szöveg", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ; igazat ad vissza;)
Ebben a kódban először deklaráljuk, hogy milyen típusú effektust engedélyezünk a műveletben, és beállítjuk azt mozgásra. A második sorban beállítjuk a használni kívánt adatokat, ahol a szöveg Szöveg lesz, az érték pedig a húzott elem azonosítója. Ezt követően a setDragImage metódust használjuk, ami beállítja, hogy mit húzzunk, majd a húzás során hol legyen a kurzor, és mivel a kockák 200 x 200 pixelesek, ezt a közepére helyeztük. A végén visszaadjuk a true-t.
Dobd el az objektumot
Ahhoz, hogy egy elem elfogadja a drop eseményt, 3 különböző eseményre kell figyelnie: dragEnter, dragOver és a drop eseményre. Tehát adjuk hozzá ezt a HTML5 div-hez nagy azonosítóval:
function dragEnter(ev) ( ev.preventDefault(); return true; ) function dragOver(ev) ( ev.preventDefault(); )
Az első függvényben azt határozzuk meg, hogy mi történjen, ha az általunk húzott elem eléri azt a kívánt elemet, ahol a dropnak meg kell történnie, ebben az esetben csak a böngésző alapértelmezett viselkedését akadályozzuk meg. Ezután a dragOver függvényben alapértelmezés szerint nem engedjük meg a leejtést.
A következő részben meghatározunk egy függvényt, amikor egy elemet "dobnak" a kívánt célpontra:
dragDrop(ev) függvény ( var data = ev.dataTransfer.getData("Szöveg"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; )
Ebben az utolsó részben először beállítjuk azt az adatváltozót, ahol megkapjuk az összes elérhető adatot szöveges formátum, majd hozzáadunk adatokat a div-hez, ahová az elemet el akarjuk dobni.
Legyen a csepp szakasz célpont
A demó azt mutatja, hogy két div visszahelyezhető a helyére. Szerencsére sokkal egyszerűbb egy másik célpont hozzáadása, mint gondolnád. Mivel már rendelkezünk ezekkel a funkciókkal, és csak eseményfigyelőket kell hozzáadnunk:
És ennyi kell ahhoz, hogy a div visszahúzódjon a helyére.
Számos drag&drop alkalmazás létezik, amelyekkel ezekkel készült JavaScript használatával könyvtárak, és gyakran könnyebben használhatók. De reméljük, hogy ebben a HTML5 és JavaScript technika, látni fogja a jövőbeni lehetőségeket problémái megoldásában.
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 tudsz testreszabhatja, 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 technikák sok éven át fejlődtek. Nem meglepő, hogy a nyitott beépülő modulokat fejlesztő programozók számának növekedésével forráskód(pl. jQuery esetén) a régi metódusok élednek fel. A JavaScript-könyvtár rendkívül adaptív, és számos fejlesztést kínál a webtechnológia korában.
Ebben az oktatóanyagban elkészítünk egy szkriptet, amellyel dinamikus téglalapokat hozhatunk létre a webhelyünkön. A folyamatot a jQuery vezérli. Az ilyen szkriptek időt takarítanak meg azáltal, hogy kész funkciókat biztosítanak! A drag and drop könyvtár pedig más projektekben is használható.
Tartalmat készítünk
Először is elkészítünk egy kis weboldalt a projekthez. A projekt mappában két figyelemre méltó nevű könyvtárat kell létrehoznia "js"és "css"és egy üres fájl index.html . A kód nagyon egyszerű lesz, így világos elképzelése van a munkáról, és van értelme a további fejlesztésnek.
Alább található a mi kódunk HTML fájl. fejezetben fej 3 forgatókönyvet adunk. A fő jQuery szkript betöltődik a Google Code szerverről. benne van a style.css fájlunk is, amely a formázás főbb tulajdonságait tartalmazza megjelenés dokumentumunk.
húzz
Engem is meg lehet húzni
P.S. Bárhová bedobhatsz!