Mi a drag and drop technológia lényege. Drag and Drop elemek (húzás és csepp)

A technológia használata húzás (húzza és csepp.) Ez lehetővé teszi a felhasználó számára, hogy különböző objektumokat mozgasson az egyikről a másikra, például az egyik lista elemei a másikba. Ehhez használjon két vezérlőt: vevő és forrás. A vevő az objektum, amelyet egy objektum objektumot kap (mozgó objektum).

A mozgó tárgyak folyamatában felmerülő események szerepelnek az általuk felmerülő sorrendben.

Onstartdrag. (TytardrageVent típus) - A művelet elején a műveletet a forrásobjektum generálja. A paraméterek, amelyek továbbítják az eseménykezelő: a Dragobject vevő tárgy (TDRAGOBUCT típus), a forrás objektum forrás (Togject típus).

Ondracover. (Tdragoverevent típus) - létrehoz egy vevő objektumot, ha az objektum felett mozog. Az Event Handlerhez továbbított paraméterek: Sender Object (Togbect Type), forrásobjektumforrás (típus típusa), állapotállapot-szobor (Tdragstate típus), x és y (egész típusú típus) - aktuális egérmutató koordináták, elfogadás (logikai típus) a mozgási művelet megerősítésének jele. A mozgás állapota lehetővé teszi, hogy megértsük, hogy a vevőegységben lévő mozgott objektum elmozdul, hagyja abba. A továbbított paraméterek lehetővé teszik a vevőkészülék objektumát a forrásforrás elfogadásához vagy elutasításához. Az elfogadás paramétere kipróbálásra van állítva, ha a mozgás elfogadásra kerül, ellenkező esetben hamis.

ondragdrop (tdragdropeventes typevent) - a vevő objektum által létrehozott, amikor a mozgó objektum leereszkedik rajta. Az eseménykezelő továbbítja az aktuális koordinátái az egérmutatót, a küldő vevő tárgy (Togject típus), a forrás objektum mozgása FORRÁS (TObject típus).

oNENDDRAG (típus enddragevent) - Létrehozva, ha a húzás és a csepp művelet befejeződött. Az X és Y koordináta eseménykezelője, ahol a feladó forrás a forrás és a célvonó objektum.

A húzás és a csepp, elegendő két esemény megvalósítása: Ondragdrop és Ondragover, amikor a DragMode tulajdonság megegyezik DMAAutomatic. Ellenkező esetben a mozgás működésének kezdete, a Begindrag módszer, a programozó kódolására van szükség.

Az anyag biztosításához hozza létre a következő alkalmazást. A panelkomponens formájában. Az Object Inspector Dragmode tulajdonságában állítsa be a DMAAutomatic értéket. Kiemeljük az objektum űrlapot, és az objektumfelügyelő segítségével létrehozza a következő eseményeket:

Eljárás TFORM1.FORMDRAGOVER (feladó, forrás: 12, Y: Integer, állapot: tdragstate; var Fact: Boolean); Kezdődik, ha forrás \u003d panel1, akkor fogadja el: \u003d igazi egyéb elfogadja: \u003d hamis; vége; Eljárás TFORM1.FORMDRAGDROP (SENDER, SOURCE: SHATCHECT; X, Y: Integer); Kezdődik a panel1.left: \u003d x; Panel1.top:\u003d y; vége;

Most futtatja az alkalmazást, és megnyomja az egérgombot a panelen, mozgathatjuk a panelobjektumot az űrlapon keresztül.

Eredmény: Megismerkedtünk a technológiával húzás (Húzza és csökkentse), és a gyakorlatban használta.

A "húzás és dobás" technikájával való munkavégzés módszerei sok éven át alakultak ki. Nem meglepő, hogy a megnyitott plug-insekerjesztő programozók számának növekedésével nőtt forráskód (Például a jQuery számára) A régi módszerek újra újjászületnek. A JavaScript-könyvtár nagyon adaptív, és számos javulást kínál a webes technológiák korában.

Ebben a leckében olyan szkriptet készítünk, amely dinamikus téglalapok létrehozására használható "cseppek és dobás" technikával a weboldalon. A folyamatot JQuery vezérli. Az ilyen szkriptek megőrzik az időt, ha készen állt funkcionalitást biztosítanak! És a "húzás és dobás" könyvtár más projektekben is használható.

Készítsen tartalmat

Először is elkészítünk egy kis webhelyet a projekt számára. A projektmappában két katalógust kell létrehoznia, figyelemre méltó nevekkel. "JS" és "CSS" és üres fájl index.html . A kód nagyon egyszerű lesz, hogy világos elképzelést készítsen a munka, és egy pont jelent meg további fejlesztés.

Az alábbiakban a mi kódja HTML fájl.. Fejezetben fej. 3 szkriptet bekapcsolunk. A fő script jquery lesz a Google Kódszerverről. A stílusunk.css styling fájl is csatlakozik, amely alapvető tulajdonságokat tartalmaz a kialakításhoz külső nézet Dokumentumunk.

Belső szakasz test. csak két blokk van elhelyezve divamelyek mindkét téglalapot tartalmaznak. A kód meglehetősen egyszerű és érthető. Minden téglalap belsejében az osztályok vezetője kezelő és handler2.. Ez fontos, mivel az egyes téglalap húzásakor a saját módján viselkedik.

Telepítse a CSS-t.

A HTML kód nagyon egyszerű. Ha a fő jelölések világosak, akkor styles CSS. Nem fog nehézségekbe ütközni. Alapvetően a mezők, a francia bekezdések és a színek meghatározzák.

Test, HTML (Font-Family: Calibri, Sans-Serif, Háttér: # EAF3FB, Betűméret: 12px; magasság: 1000px; vonalmagasság: 18px;) P (magasság: 30px;)

Választók test, html. Csak egy demonstrációs oldalra használják. És az egész tartalom két húzó téglalappal helyezkedik el.

DV1 (szélesség: 200px; background-color: # EFF7FF; Border: 1px szilárd # 96C2F1; position: abszolút; balra: 100px; top: 100px;) .dv1 h2 (háttér-szín: # B2D3F5; padding: 5px; font- Család: Georgia, "Times New Roman", Times, Serif; Betűméret: 1.0em; Szöveges transzformáció: nagybetűs; Betűsúly: Bold; Szín: # 3A424a; Margin: 1px; Cursor: Move;) .dv1 div (Padding: 5px, margó) alsó: 10px;) .dv2 (háttérszín: # F7EBFB, határ: 1px szilárd # A36FDE; szélesség: 550px; pozíció: abszolút; Mozgás; balra: balra: 400px; .Dv2 h2 (háttér szín: # eacfe9, betűterület: -0.09em; betűméret: 1.8em; betűtípus-súly: merész; párnázás: 15px; margó: 1px; Color: Move; .dv2 .content2 (Padding: 5px, margó alsó: 10px;)

Mindkét osztály esetében.dv1 i.dv2, használunk abszolút pozícionálást. Ez nem szükséges, és valószínűleg nem a leginkább a legjobb mód A húzásmentes téglalapok elhelyezése. Azonban példaként az ilyen pozícionálásnak van értelme, mivel minden alkalommal, amikor az oldal téglalapokat telepítenek bizonyos helyeken.

A betűtípusok és a színek különböznek a téglalapok számára, hogy megkönnyítsék a különbséget.

A fejlécek hátralévő része és a blokkok tartalma szinte azonos. Ha másolja a stílusokat a projektben, módosítsa a neveket a futás előtt. Bizonyos esetekben logikusabb lesz az osztályok helyett, például az egy adott blokk "húzás és dobás" technikáinak használatakor.

A JavaScript-et szétszereljük

Két JavaScript fájl tartalmazza az összes szükséges kódot. Csökkentjük a munka részleteit a jQuery-vel, mivel meghaladja a leckét. Figyeljen a jquery.dragnndrop.js fájlra.

A funkciót a 22. sorban határozzák meg Húzza..

$ .fn.drags \u003d funkció (OPTS) (VAR PS \u003d $ .Extend (Zindex: 20, Opacity: .7, Handler: Null, OnMove: Funkció () (), ONDROP: FUNKCIÓ () ()), Opts) ;

Itt a visszaküldött változó és az inicializálási adatok be vannak állítva Húzza.. Ezt a módszert nagyon széles körben használják, ha a JQUIERY-ot a más funkciókhoz való átadáshoz használják. Belül beállítjuk a változókat a téglalapok húzására vonatkozó összes rendelkezésre álló lehetőséghez.

A kód következő része az eseménykezelők változóhoz tartoznak dragndrop.. Mindkét esemény húzza. és csepp. Hívás funkciók az eseményparaméterek átvitelével. Ezek az események akkor fordulnak elő, ha az egérgombra kattint, hogy húzza az objektumot, majd engedje el.

Var dragndrop \u003d (dragdata \u003d e.data.dragdata; dragdata.target.css ((balra: dragdata.left + e.pagex - dragdata.offleft, top: dragdata.top + e.pagey - dragdata.offtop); Dragdata .handler.css ((kurzor: "Mozgatás")); dragdata.target.css ((kurzor: "Mozgatás")); dragdata.ONMOVE (e);), csepp: FUNKCIÓ (e) (var dragdata \u003d e. data.dragdata; dragdata.target.css (dragdata.oldcss); //. CSS ("opacitás": "")); Dragdata.handler.css ("kurzor", Dragdata. Oldcss.Cursor); (E); $ (). Az unbind ("mousemove", dragndrop.drag).

Funkcióink manipulálják a CSS pozícionálását minden objektumot. Ha módosítja az objektumok abszolút elhelyezését, akkor nem fogja befolyásolni a kód működését, mivel minden JavaScript funkció megváltoztatja az objektumhoz megadott stílust.

A maradék kódot ellenőrizzük a kezelő és a kozmetikai változások más stílusokból. Itt hozzáadhat egy változást az átláthatóság, a betűtípus és színek, vagy új bekezdések hozzáadása.

Drag / Drop funkciók

A második fn.js fájl egyszerű kódot tartalmaz. Várjuk a dokumentum teljes letöltését, majd felhívjuk a funkciókat. Meghatározzák a funkció két példányát Húzza.amelyet korábban értünk.

Két mozgott blokk van az osztályokkal.Dv1 i.dv2. Ha egy mozgó blokkot kell hagynia, csak a kód második részét kell eltávolítania. Egy másik mozgott blokk hozzáadásával egyszerűen elvégezhető. Csak hozzá kell adnod Új funkció Ebben a fájlban.

Először is be kell állítania az opciókat a funkció hívásakor. Ügyeljen arra, hogy állítsa be a kezelő nevét. Ezzel tájékoztatjuk a jquery-t, melyik kezelőt használják, amikor megnyomja az egérgombot egy adott dokumentumterületen. A kezelő neve lehet egy osztály vagy egy azonosító attribútum.

Első funkciónkban két eseménykezelő van onmove. és ondrop.. Mindkettő új funkciókat hívnak az aktuális eseményhez, mint változóként. Itt van a HTML-kód manipulálása a téglalapban, hogy frissítsen minden mozgást. Ez egy csodálatos hatás, hogy bemutassa, hogyan lehet ellenőrizni a folyamatot egyszerű jquery események segítségével.

A második funkcióban a Z-index és az átlátszatlanság paramétereit használjuk. Adhatok más CSS tulajdonságokat? De ez megköveteli a JavaScript kódot a telepítések ellenőrzéséhez. Például továbbíthat egy másik betűtípust vagy jelentést a magasság és a szélesség a téglalap mozgó - ez lesz egy nagyon érdekes trükk!

Következtetés

Egy kis munka eredményeként egy csodálatos felületet kaptunk a "cseppek és dobás" funkcióval. A jQuery óriási előnyökkel jár a fejlesztők számára, akik régi módszereket használnak a régi módszerek használatára.

Ennek eredményeképpen nemcsak az eseménykezelők funkcióit kaptuk, de új változókat tudunk továbbítani a drag-mentes blokkokba. Ez új lehetőségeket nyit meg a kreativitás számára. A lecke tüntetése csak a vázlatot tartalmazza, hogy mit lehet tenni egy ilyen kód segítségével.

Tehát megtudhatja a JQuery dokumentációt a könyvtári funkciók használatához.

Ahol a GUI elemeket pszeudográfiával hajtják végre) az egér manipulátorral vagy érintőképernyővel.

A módszert a "Capture" (a fő megnyomásával) hajtják végre ( első, Gyakrabban, mint a bal oldalon) egérgombbal) jelenik meg a számítógép számítógép képernyőjén, szoftver elérhető egy ilyen művelet, és helyezze át egy másik helyre (változtatni a helyét), vagy „dobott” egy másik elem (hívni a megfelelő előírt a program, akciók). Az ablakok vonatkozásában (szintén képesek mozgatni ebben a módszerben), ezt a kifejezést általában nem használják.

Alapvető intézkedések és a legtöbb egyszerű példák A drag-and-drop műveletek: Objektum mozgatása, Mozgassa az objektumot a panelbe a panelre, bár a modern operációs rendszer A drag-and-drop széles körben elterjedt, és az egyik legfontosabb módja a számítógéphez a grafikus felhasználói felületen.

Tárgyak mozgatására lehet a következő felület elemeit: asztali ikonok (ikonok), úszó eszköztár parancsikonok a tálcán (kezdve a Win XP), TreeView elemeket, szöveget, DataGridView sejt., Szintén OLE elemeket. Az objektumok mindegyik területen belül, egy ablakon belül, egy ablak és a különböző ablakok között mozoghatnak.

A húzás eseményt bármely felhasználói műveletnek kell kezdeményeznie. Leggyakrabban ez a művelet az elem bal egérgombbal nyomja meg (az eseményt moudownnak nevezik), amely a tartályába mozgatható. Egyes összetevők rendelkeznek saját események A Drag-N-Drop - például a TreeView egy elemes eseménye van.

Wikimedia Alapítvány. 2010.

Nézze meg, mi a "Drag-and-drop" más szótárakban:

Húzza és csepp. - \u003c[dræg ənd drɔ̣p] n.; ; UNZ.; Edv\u003e Das Anklicken eines Objektes, Das Auf Dem ComputerBildschirm (in eine Andere Datei bzw. Egy Eine Andere Stelle) verschoben U. Dort Wieder Losgelassen Wird [Engl. Drag "Ziehen" + és "UND" + DROP "FALLEN ... Universal-Lexikon

Bármilyen intézkedés végrehajtásának formája grafikus interfészek Felhasználó felhasználása számítógépes egér. Lefordítva angolul szó szerint: fordulás és dobás. A műveletet a képernyőn látható módon látja el ... ... ... Üzleti kifejezések szótár

húzza és csepp. - (Computing) áthelyezheti egy ikon, fájl, stb a képernyőn az egér használata, és engedje el egy másik helyen (drag and drop melléknév) Fő Belépő: Drag ... Hasznos angol szótár

húzza és csepp. - Az egér segítségével mozgatni valamit a számítógép képernyőjére a másikra: »A szoftver lehetővé teszi, hogy húzza és dobja az elemeket a Bárhol akarsz. Főbejegyzés: Drag ... Pénzügyi és üzleti feltételek

csepp - UK US verb n.; Gen :; PL.: UNZ.; Edv\u003e Das Anklicken eines Objektes, Das Auf Dem ComputerBildschirm (in eine Andere Datei bzw. Egy Eine Andere Stelle) verschoben U. Dort Wieder Losgelassen Wird)