Pukseerimisfunktsioon võib aidata teie iPadi jõudlust parandada. Siin on, kuidas seda kasutada.
Nii saate teisaldada faili ühest pilvesalvestusteenusest teise, kopeerida teksti Safarist tekstitöötlusrakendusse, et lisada hinnapakkumine, või varundada konkreetseid fotosid failisalvestusrakendusse.
Kuidas pukseerida fotosid, faile ja teksti1. Puudutage pikalt fotot, faili või esiletõstetud teksti, mille soovite lohistada teise rakendusse.
2. Lohistage üksus soovitud asukohta selles rakenduses või mõnes teises, mille olete avanud režiimis Slide Over või Split View, ja vabastage.
1. Puudutage pikalt üht fotot või faili, mida soovite lohistada.
2. Praeguse üksuse lohistamise ajal toksake teist fotot või faili, mida soovite samuti lohistada. Tehke seda uuesti nii paljude üksustega, kui soovite teisaldada.
3. Lohistage kõik valitud objektid määratud asukohta teises rakenduses, mille olete avanud režiimis Slide Over või Split View, ja vabastage need.
1. Puudutage pikalt tekstiosa, mida soovite lohistada, et see valida.
2. Kasutage valikupunkte, et tõsta esile ülejäänud tekst, mida soovite lohistada.
3. Puudutage ja hoidke esiletõstetud teksti.
4. Lohistage tekst rakendusse, kuhu soovite selle paigutada, ja vabastage see.
Kuigi enamik iOS-i pukseerimisfunktsioone töötab ainult iPadis, töötab see trikk tegelikult nii iPhone'is kui ka iPadis. See võimaldab teil korraldada rakenduste paigutust avakuval, kasutades lohistamist, selle asemel, et neid ükshaaval teisaldada.
1. Puudutage ja hoidke all rakenduse ikooni, mille asukohta soovite avakuval muuta.
2. Puudutage täiendavaid rakendusi, mida soovite samuti teisaldada.
3. Lohistage need rakendused lehele või kausta, kuhu soovite neid lisada, ja pukseerige need.
182
Selles näites valime div-elemendi ja muudame selle teisaldatavaks, kutsudes sellel olevat meetodit draggable(). Nagu näidatud alloleval joonisel, võtab element avatud dokumendis oma tavapärase positsiooni, kuid pärast seda saab selle hiirekursori abil brauseriaknas suvalisse kohta liigutada:
Elementide pukseerimise võimalus on iseenesest kasulik, kuid veelgi kasulikum, kui seda kasutatakse koos pukseeritava interaktsiooniga, mida kirjeldatakse järgmisena.
Lohistav interaktsioon saavutatakse ainult konkreetse HTML-i märgistuse ja CSS-stiilide kasutamisega. See tähendab, et see funktsioon töötab peaaegu igas brauseris, kuid sellega varustatud elemendid ei saa töötada operatsioonisüsteemide sarnaste loomulike pukseerimisfunktsioonidega.
HTML5 spetsifikatsiooniga määratletud pukseerimistoiminguid rakendatakse tavaliselt operatsioonisüsteemi algmehhanismide abil. Kui kasutate jQuery kasutajaliidese pukseerimismehhanismi, on konfliktide vältimiseks parem keelata samaväärsed HTML5 funktsioonid. Selleks määrake dokumendi kehaelemendi lohistatav atribuut väärtuseks false.
Lohistava interaktsiooni seadistamineLohistavate interaktsioonide jaoks on palju kohandamisvalikuid. Kõige olulisemad omadused, mida arutatakse järgmistes osades, on toodud allolevas tabelis:
| telg | Piirab teatud suundades liikumise võimet. Vaikeväärtus on false, mis tähendab, et piiranguid pole, kuid saate määrata ka väärtuse "x" (liiguta ainult mööda X-telge) või "y" (liiguta ainult mööda Y-telge). |
| ohjeldamine | Piirab teisaldatava elemendi asukohta ekraani kindlasse piirkonda. Toetatud väärtuste tüüpe kirjeldatakse allolevas tabelis, kasutades vastavat näidet. Vaikeväärtus on false, mis tähendab, et piiranguid pole |
| viivitus | Määrab, kui kaua tuleb elementi lohistada, enne kui see liigub. Vaikeväärtus on 0, mis tähendab, et viivitust pole |
| vahemaa | Määrab kauguse, mille kasutaja peab elemendi algpositsioonist lohistama, enne kui see tegelikult liigub. Vaikeväärtus on 1 piksel |
| võre | Sunnib teisaldatud elemendi ruudustiku lahtrite külge kinnitama. Vaikeväärtus on false, mis tähendab, et sidumist pole |
Elemendi liikumist teatud suundades saate piirata mitmel viisil. Esimene on teljevaliku kasutamine, mis võimaldab piirata liikumissuunda X- või Y-teljega. Selle näide on toodud allpool.
... div.dragElement (fondi suurus: suur; ääris: õhuke täismust; polsterdus: 16 pikslit; laius: 8 em; teksti joondamine: keskel; taustavärv: helehall; veeris: 4 pikslit ) $(function() ( $ (".dragElement").draggable(( telg: "x")).filter("#dragV").draggable("valik", "telg", "y" )); Lohistage vertikaalselt Lohistage horisontaalselt Käivita näide
Selles näites määratleme kaks div elementi, valime need jQuery abil ja kutsume välja draggable() meetodi. Selle meetodi argumendina edastame objekti, mis esialgu piirab mõlema div elemendi liikumist piki X-telge. Seejärel saame jQuery filter() meetodil valida dragV elemendi ilma jQuery otsingut tegemata. kogu dokument uuesti ja seadke see teistsugusele lubatud liikumissuunale - mööda Y-telge. Nii saame dokumendi, milles ühte div elementi saab lohistada ainult vertikaalsuunas ja teist - ainult horisontaalsuunas. Tulemus on näidatud joonisel:
Samuti saate piirata ekraani ala, kuhu saate üksust lohistada. Selleks kasutage piiramise võimalust. Selle valikuga määratavaid väärtusvorminguid kirjeldatakse allolevas tabelis.
Allpool on toodud näide piiramisvaliku kasutamisest:
... div.dragElement (fondi suurus: suur; ääris: õhuke täismust; polsterdus: 16 pikslit; laius: 8 em; teksti joondamine: keskel; taustavärv: helehall; veeris: 4 pikslit ) #container ( ääris: keskmine topelt must; laius: 700 pikslit; kõrgus: 450 pikslit. telg", "x"); )); Lohistage horisontaalselt Lohistage vanemkäivituse näide
Selles näites on mõlema elemendi liikumisvõime piiratud, nii et neid saab lohistada ainult nende põhielemendis, mis on fikseeritud suurusega div. Ühel ujutatavast divist on täiendav piirang, et seda saab ujutada suvandi telg abil, kuna see saab liikuda ainult horisontaalselt oma vanemas. Tulemust illustreerib joonis:
Ruudustik võimaldab teil määrata teisaldatud elemendi sidumise ruudustiku lahtritega. See suvand võtab väärtusena kahest elemendist koosneva massiivi, mis määrab ruudustiku lahtrite laiuse ja kõrguse pikslites. Võrguvaliku kasutamise näide on toodud allpool:
... #lohistav (fondi suurus: x-suur; ääris: õhuke ühevärviline must; laius: 5 em; teksti joondamine: keskel; polsterdus: 10 pikslit) $(function() ( $("# lohistatav").draggable( ( ruudustik: )); Lohistage mind Käivita näide
See näide määrab ruudustiku, mille lahtrid on 100 pikslit laiad ja 50 pikslit kõrged. Kui lohistad elementi, siis see "hüppab" ühest (nähtamatust) lahtrist teise. Snapping-efekt on suurepärane näide interaktsioonifunktsioonide kasutamisest, kuid seda on ekraanipiltide abil raske edasi anda.
Snap-efekti saate luua ainult ühe suuna jaoks, määrates vaba liikumise telje väärtuseks 1. Näiteks kui seate ruudustiku valikuks , klõpsab element horisontaalselt liigutades 100 piksli laiuste ruudustiku lahtrite külge, kuid liigub vabalt vertikaalselt.
Liikumise viivitusOn kaks võimalust, mis võimaldavad teil liikuva elemendi lohistamist edasi lükata. Viivitusvalik võimaldab määrata millisekundites aja, mille jooksul kasutaja peab hiirekursorit enne elemendi tegelikku teisaldamist lohistama. Teist tüüpi viivitust pakub vahemaa valik, mis määrab pikslites kauguse, mille kasutaja peab hiirekursorit lohistama, enne kui sellele järgneb element.
Mõlema sätte kasutamise näide on toodud allpool:
... #aeg, #kaugus (fondi suurus: suur; ääris: õhuke täismust; polsterdus: 10 pikslit; laius: 120 pikslit; teksti joondus: keskel; taustavärv: helehall; veeris: 4 pikslit; ) $(function( ) ( $("#aeg").draggable(( viivitus: 1000 )) $("#distants").draggable(( kaugus: 150 )) )); Blokk viivitusega Blokk minimaalse vahemaaga Jooksu näide
Selles näites on kaks teisaldatavat elementi, millest üks viivitatakse viivitusvaliku abil ja teine viivitatakse kauguse valiku abil.
Viivitusvalikuga määratud viivituse korral peab kasutaja teatud aja lohistama, enne kui elementi tegelikult liigutab. Selles näites on selle perioodi kestus 1000 ms. Sel ajal ei ole vaja hiirt liigutada, kuid kogu viiteperioodi vältel peab hiirenupp all hoidma, misjärel saab elementi hiirt liigutades liigutada. Pärast viiteaja möödumist klõpsab teisaldatav element hiirekursori asukohta vastavalt varem käsitletud ruudustiku, piirkonna ja telje valikute kehtestatud piirangutele.
Vahemaa valik mõjub sarnaselt, kuid sel juhul peab kasutaja lohistama hiirekursorit vähemalt määratud arvu piksleid mis tahes suunas elemendi alguskohast. Teisaldatav element hüppab seejärel kursori praegusesse asukohta.
Kui rakendate samale elemendile mõlemad sätted, ei liigu teisaldatud element enne, kui mõlemad viivituse kriteeriumid on täidetud, s.t. kuni elemendi lohistamise katse kestab määratud aja ja kuni hiirekursor liigutab määratud arvu piksleid.
Lohistavate interaktsioonimeetodite kasutamineKõik lohistatava interaktsiooni jaoks määratletud meetodid kuuluvad baasmeetodite komplekti, mida olete vidinaid vaadates juba näinud. Lohistava interaktsiooni jaoks pole spetsiifilisi meetodeid, seega me neid üksikasjalikult ei käsitle. Saadaolevate meetodite loend on toodud allolevas tabelis:
Lohistavate interaktsioonisündmuste kasutamineInteraktsiooni lohistatav funktsioon toetab lihtsat sündmuste kogumit, mis teavitab teid elemendi lohistamisest. Neid sündmusi kirjeldatakse allolevas tabelis:
Nagu vidinasündmuste puhul, saab ka nendele sündmustele reageerida. Alus- ja peatumissündmuste käsitlemise näide on toodud allpool:
... #lohistav (fondi suurus: x-suur; ääris: õhuke ühevärviline must; laius: 190 pikslit; teksti joondamine: keskel; polsterdus: 10 pikslit) $(function() ( $("# lohistatav").draggable( ( start: function() ( $("#draggable").text("Drag me..."), stop: function() ( $("#draggable").text("Drag me") ) )) ; )); Lohistage mind Käivita näide
See näide kasutab algus- ja lõpetamissündmusi, et muuta elemendi tekstisisu selle lohistamisel. See eelis tuleneb asjaolust, et Draggable'i interaktsiooni rakendatakse täielikult HTML-i ja CSS-i abil: saate jQuery abil muuta lohistatava elemendi olekut isegi siis, kui see liigub üle ekraani.
Kukkutava interaktsiooni kasutamineMõnes olukorras võib piisata ainult elemendi lohistamisest, kuid see on kõige kasulikum, kui seda kasutatakse koos pukseeritava interaktsiooniga.
Elemendid, millele on rakendatud pukseeritavat interaktsiooni (vastuvõtvad elemendid), saavad võimaluse vastu võtta pukseeritava interaktsiooni abil loodud teisaldatavaid elemente.
Vastuvõtvad elemendid luuakse meetodi droppable() abil, kuid kasulike funktsioonide saamiseks peate looma sündmuste käitlejad, mis on seda tüüpi interaktsiooni jaoks määratletud. Saadaolevad sündmused on näidatud allolevas tabelis:
| luua | Tekib siis, kui elemendile rakendatakse pukseeritavat interaktsiooni |
| aktiveerida | Tekib siis, kui kasutaja hakkab teisaldatavat elementi lohistama |
| desaktiveerida | Tekib siis, kui kasutaja lõpetab teisaldatava elemendi lohistamise |
| läbi | Esineb siis, kui kasutaja lohistab ujuva elemendi üle vastuvõtva elemendi (eeldusel, et hiirenuppu pole veel vabastatud) |
| välja | Tekib siis, kui kasutaja lohistab teisaldatava elemendi vastuvõtvast elemendist väljapoole |
| tilk | Tekib siis, kui kasutaja lahkub teisaldatavast elemendist vastuvõtvale elemendile |
Allpool on toodud näide lihtsa vastuvõtva elemendi loomisest, mille jaoks on määratletud ühe tilga sündmuste käitleja:
... #lohitav, #langetav (fondi suurus: suur; ääris: õhuke täismust; polsterdus: 10 pikslit; laius: 100 pikslit; teksti joondamine: keskel; taustavärv: helehall; veeris: 4 pikslit;) #langetav (polster : 20 pikslit: absoluutne #lohistav").text("Vasakule") ) )); )); Jäta mind siia Lohista mind Käivita näide
See näide lisab dokumendile div elemendi, mille tekstisisu tähistab string "Jäta siit". Valime selle elemendi jQuery abil ja kutsume välja droppable() meetodi, edastades sellele sätteobjekti, mis määratleb kukkumissündmuse käitleja. Vastus sellele sündmusele on teisaldatava elemendi teksti muutmine meetodi text() abil.
Selles näites loodud pukseerimise interaktsioon on lihtne, kuid pakub kasulikku konteksti, et selgitada, kuidas pukseeritavad ja pukseeritavad interaktsioonid koos töötavad. Elementide lohistamise protsessi erinevad etapid on illustreeritud joonisel:
See kõik tundub väga lihtne. Lohistame teisaldatavat elementi, kuni see on vastuvõtva elemendi kohal, ja vabastame selle. Kukkunud element jääb sinna, kuhu see jäeti, ja selle teksti sisu muutub vastusena kukutamissündmusele. Järgmistes jaotistes näidatakse, kuidas kasutada muid pukseeritavaid interaktsioonisündmusi kasutajakogemuse parandamiseks.
Sihtmärgi vastuvõtva objekti valgustusAktiveerimis- ja deaktiveerimissündmuste abil saate sihtmärgi vastuvõtva objekti esile tõsta, kui kasutaja alustab elemendi lohistamist. Paljudes olukordades on see idee väga viljakas, kuna see annab kasutajale usaldusväärse juhise selle kohta, millised elemendid on pukseerimismudeli osad. Vastav näide on toodud allpool:
... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Left ") ), aktiveerige: function() ( $("#droppable").css(( ääris: "keskmine topeltroheline", backgroundColor: "lightGreen" )); ), deaktiveeri: function() ( $("#droppable" ").css("ääris", "").css("taustavärv", ""); ) )); )); ...Jäta eeskuju
Niipea, kui kasutaja hakkab elementi lohistama, käivitatakse meie vastuvõtva elemendiga seotud aktiveerimissündmus ja töötleja funktsioon kasutab meetodit css() selle elemendi ääriste ja taustavärvi CSS-i atribuutide muutmiseks. Selle tulemusena tõstetakse esile sihtmärgi vastuvõttev element, mis näitab kasutajale, et selle ja teisaldatava elemendi vahel on ühendus.
Deaktiveerimissündmust kasutatakse CSS-i atribuutide väärtuste eemaldamiseks vastuvõtvast elemendist ja selle algolekusse naasmiseks niipea, kui kasutaja hiirenupu vabastab. (See sündmus leiab aset alati, kui elemendi lohistamine peatub, olenemata sellest, kas lohistatav element jääb vastuvõtvale elemendile või mitte.) Seda protsessi illustreerib joonis:
Pukseerimistehnoloogiat saab täiustada sündmuste haldamise lisamisega. Üleminek toimub siis, kui 50% teisaldatavast elemendist asub vastuvõtva elemendi mis tahes osa kohal. Väljund toimub siis, kui varem kattuvad elemendid enam ei kattu. Allpool on toodud näide nendele sündmustele reageerimisest.
$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Left") ) , aktiveerige: function() ( $("#droppable").css(( ääris: "keskmine topeltroheline", backgroundColor: "lightGreen" )); ), deaktiveeri: function() ( $("#droppable"). css("border", "").css("background-color", "" over: function() ( $("#droppable").css(( border: "medium double red", backgroundColor : "); red" )); out: function() ( $("#droppable").css("border", "").css("taustavärv", ""); ) )); Käivitage näide
Siin kasutatakse samu käitleja funktsioone, mis eelmises näites, kuid antud juhul on need seotud üle ja välja sündmustega. Kui vähemalt 50% teisaldatavast elemendist kattub vastuvõtva elemendiga, suletakse see raami ja selle taustavärv muutub, nagu on näidatud joonisel:
Seda 50% piiri nimetatakse kattuvuse läveks (tolerantsiks), mille väärtust saab määrata vastuvõtva elemendi loomisel, nagu edaspidi näidatakse.
Kukkutava interaktsiooni seadistamineKukkutaval interaktsioonil on mitmeid omadusi, mida saate selle käitumise kohandamiseks muuta. Need omadused on loetletud allolevas tabelis:
| puudega | Kui see valik on tõene, on pukseeritava interaktsiooni funktsioon algselt keelatud. Vaikeväärtus on false |
| aktsepteerima | Kitsendab liigutatavate elementide komplekti, millele vastuvõttev element reageerib. Vaikeväärtus on *, mis vastab mis tahes elemendile |
| ActiveClass | Määrab klassi, mis määratakse vastuseks aktiveerimissündmusele ja eemaldatakse vastusena desaktiveerimise sündmusele |
| hoverClass | Määratleb klassi, mis määratakse vastuseks üle-sündmusele ja eemaldatakse vastusena väljumissündmusele |
| sallivus | Määrab minimaalse kattumise astme, mille korral ülesündmus toimub |
Saate piirata pukseeritavate elementide kogumit, mida kukutatava koostalitlusvõimega element aktsepteerib, kasutades aktsepteerimisvalikut. Aktsepteerimisvaliku väärtuseks tuleks määrata valija. Selle tulemusena ilmnevad pukseeritavad interaktsioonisündmused ainult siis, kui teisaldatav element vastab määratud valijale. Vastav näide on toodud allpool:
... .lohitav, #langetav (fondi suurus: suur; ääris: õhuke täismust; polsterdus: 10 pikslit; laius: 100 pikslit; teksti joondamine: keskel; taustavärv: helehall; veeris: 4 pikslit;) #langetav (polster : 20px; positsioon: absoluutne ui.draggable.text("Left") ), aktiveerige: function() ( $("#droppable").css(( ääris: "keskmine topeltroheline", backgroundColor: "lightGreen" )); ), deaktiveeri: funktsioon () ( $("#droppable").css("border", "").css("background-color", ""); ), aktsepteeri: "#drag1" )); Jätke siia Element 1 Element 2 Run näide
Selles näites on kaks lohistatavat elementi ID-ga drag1 ja drag2. Vastuvõtva elemendi loomisel kasutame aktsepteerimisvalikut, millega anname märku, et ainult drag1 element on vastuvõetav teisaldatav element.
Kui lohistate elementi drag1, näete sama efekti nagu eelmistes näidetes. Sobivatel aegadel käivitatakse vastuvõtva elemendi aktiveerimise, desaktiveerimise, üle ja välja sündmused. Samal ajal, kui lohistate drag2 elemendi, mis ei vasta aktsepteerimisparameetris määratud valijale, siis neid sündmusi ei käivitata. Seda elementi saab vabalt liigutada, kuid vastuvõttev element ei taju seda.
Pange tähele muutust selles, kuidas me valime vastuvõetava hõljuva elemendi, millel teksti() meetodit kutsuda. Kui dokumendis oli ainult üks liikuv element, piisas selleks id atribuudist:
Drop: function() ( $("#draggable").text("Left") ),
Selles näites on kaks ujuvat elementi ja id atribuudi järgi valimine ei anna soovitud tulemust, kuna sel juhul muutub tekst alati samas ujuvas elemendis, olenemata sellest, milline neist on vastuvõtva elemendi jaoks vastuvõetav.
Lahenduseks on ui-objekti kasutamine, mille jQuery kasutajaliides pakub igale sündmusekäsitlejale lisaargumendina. UI-objekti lohistatav atribuut tagastab jQuery objekti, mis sisaldab elementi, mida kasutaja sihtelemendile lohistab või üritab kukutada, võimaldades soovitud elemendi valida järgmiselt:
Drop: function(event, ui) ( ui.draggable.text("Left") ),
Kattumisläve muutmineVaikimisi toimub ülesündmus ainult siis, kui vähemalt 50% teisaldatavast elemendist kattub vastuvõtva elemendiga. Selle läve kattumise suurust saab muuta tolerantsi suvandi abil, mis võib võtta allolevas tabelis näidatud väärtused:
Kaks kõige sagedamini kasutatavat väärtust on sobitamine ja puudutamine, kuna need on kasutajatele kõige mõistlikumad. Kasutan sobitamist, kui lohistatav element peab jääma vastuvõtva elemendi piirkonda, kuhu see teisaldati, ja puudutamist, kui lohistatav element peab naasma oma algasendisse (näide on toodud allpool). Allpool on toodud sobivus- ja puuteparameetrite kasutamise näide.
Klooni väärtus käsib jQuery kasutajaliidesel luua teisaldatavast elemendist koopia koos kogu selle sisuga ja kasutada saadud tulemust abielemendina. Tulemus on näidatud joonisel:
Abielement eemaldatakse, kui kasutaja vabastab liigutatava elemendi kohal oleva hiirenupu, jättes teisaldatava elemendi ja vastuvõtva elemendi oma algsesse asendisse.
Nagu joonisel näha, jääb teisaldatav algelement paigale ja ainult abielement liigub ekraanil mööda hiirekursorit. Kui teisaldatud elemendi suurus on suur, nagu meie näites, siis katab see ülejäänud dokumendielemendid, nii et kasutajal on raske isegi vastuvõtva elemendi asukohta jälgida. Seda probleemi saab lahendada, lisades funktsiooni abivajava väärtusena, nagu on näidatud allolevas näites:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ...Jäta eeskuju
Kui kasutaja hakkab elementi lohistama, kutsub jQuery kasutajaliides abiparameetriga määratud funktsiooni ja kasutab tagastatavat elementi lohistatava objektina. Sel juhul kasutan img-elemendi loomiseks jQueryt. Tulemus on näidatud joonisel:
Väike pilt toimib teisaldatava elemendi puhverserverina, muutes dokumendi muude elementide jälgimise palju lihtsamaks.
UI-objekt, mille jQuery kasutajaliides edastab pukseeritavatele interaktsioonisündmustele, sisaldab abistaja atribuuti ja seda atribuuti saab kasutada abistajaga manipuleerimiseks selle lohistamise ajal. Allpool on toodud näide selle atribuudi kasutamisest koos üle ja välja sündmustega:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "paks tahke #27e6ed") ) , out: function(event, ui) ( ui.helper.css("border", "") ) )); )); ...
Siin kasutatakse üle- ja väljasündmusi ning atribuuti ui.helper, et kuvada abielemendi ümber ääris, kui see kattub vastuvõtva elemendiga. Tulemus on näidatud joonisel:
Kasutades klõpsamisvalikut, saate tagada, et teisaldatud element "tõmbub" nende elementide servadesse, millest see möödub. See valik aktsepteerib valija väärtusena. Teisaldatav element kinnitub mis tahes määratud valijale vastava elemendi servadele. Snap-suvandi kasutamise näide on toodud allpool:
Käivitage jQuery kasutajaliidese näide #snapper, .draggable, .droppable (fondi suurus: suur; ääris: keskmine ühevärviline must; polsterdus: 4 pikslit; laius: 150 pikslit; teksti joondamine: keskel; taustavärv: helehall; veeris-alumine: 10 pikslit ;).langetav (veeris-parem: 5px; kõrgus: 50px; laius: 120px) #dropContainer (asend: absoluutne; parem: 5px;) div span (positsioon: suhteline; ülaosa: 25%) .droppable.active (ääris: keskmine tahke roheline) .droppable.hover (tausta värv: heleroheline) #snapper (asend: absoluutne; vasak: 35%; ääris: keskmine must; laius: 180px; kõrgus: 50px) $(function() ( $(") div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "mõlemad", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "hõljuma" )); Ostukorv Snap here Lohistage mind
Kui liikuv element läheneb ühele sobivale elemendile, "tõmbub see" selle külge nii, et nende külgnevad servad puutuvad kokku. Sellise sidumise jaoks saate valida mis tahes elemendi, mitte ainult vastuvõtva elemendi. Selles näites lisasin elemendi div ja määrasin snap-suvandi väärtuse, mis valib nii selle elemendi kui ka vastuvõtva elemendi dokumendis.
On paar abistavat valikut, mis võimaldavad elementide ankurduskäitumist täpsemalt kohandada. Üks neist on snapMode'i valik. Selle abiga saate määrata köitmise tüübi. Lubatud on järgmised väärtused: sisemine(kinnitage elementide siseservade külge), välimine(kinnitage elementide välisservade külge) ja mõlemad(kinnitage kõik servad; vaikimisi).
Suvand snapTolerance võimaldab teil määrata, kui kaugele peab hõljuv element lähenema sihtelemendi servale enne klõpsamist. Vaikeväärtus on 20, mis tähendab 20 pikslit. Näites kasutatakse väärtust 50, mis vastab klõpsule suuremal kaugusel. Selle valiku jaoks on väga oluline valida õige väärtus. Kui snapTolerance väärtus on liiga madal, ei pruugi kasutaja klõpsamisefekti märgata ja kui see on liiga kõrge, hakkab liigutatav element sooritama ootamatuid hüppeid, klõpsates eemal asuvatele elementidele.
Hiljuti tekkis mul idee hakata arendama mängu Androidile. Alustuseks otsustasin kirjutada malet. Mulle tundus, et Drag and Drop tehnoloogia sobiks suurepäraselt figuuride liigutamise mehhanismi rakendamiseks. Asjatundmatute jaoks märgin, et lohistamise meetod on võimalus lohistada üks graafiline objekt teisele ja teha pärast vabastamist üks või teine toiming. Lihtsaim näide on otsetee kustutamine arvuti töölaualt, lohistades selle prügikasti. Sildi prügikasti "viskades" ütleme süsteemile, et tahame sundida neid kahte objekti suhtlema. Süsteem võtab meie signaali vastu ja otsustab, mida ta peaks tegema. Pukseerimine on oma intuitiivse selguse tõttu laialt levinud. Seda lähenemisviisi toetab meie kogemus reaalmaailma objektidega suhtlemisel ja see toimib suurepäraselt virtuaalses keskkonnas. Mis puutub malesse, siis lohistamise abil on tehnoloogiliselt lihtsam määrata lahtrit, kuhu kasutaja nupu lohistas, kuna vabastuspunkti koordinaatide järgi ei ole vaja lahtri numbrit arvutada. Selle töö võtab üle virtuaalmasin.
Pukseerimistehnoloogia kasutamine võimaldab mul vähese vaevaga lahendada kolm probleemi:
Ülesanded on kindlaks tehtud, asume neid ellu viima.
ImageView asendus puudutusegaKõik minu kujundid on ImageView objektid. Kahjuks selgus, et Drag & Dropi juurutamine Androidis ei võimalda “otse karbist välja” asendada puudutamisel objekti kujutist. Selle ülesande saab aga API abil täielikult lahendada. Peame tegema mitmeid lihtsaid samme:
Need toimingud tuleb rakendada ImageView objekti OnTouchListneri käitlejas. Selleks alistame onTouchi meetodi:
@ Alista avalik tõeväärtus onTouch(vaatevaade, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; Vaade. DragShadowBuilder vaade DBubilder=hadow (vaade) vaade (clipData, 0 ) ;Kõik on väga lihtne. Niisiis, oleme pildi asendamise lahendanud, jätkame järgmise ülesandega.
Pukseerimisfunktsiooni lohistamisala piiramineTõmbamisala piiramisega on probleem. Asi on selles, et kui vabastate nupu väljastpoolt tahvlit, siis kukkumissündmust ei toimu, kuna kasutaja vabastas objekti tühjas kohas ja objektil pole millegagi suhelda. Selle tulemusena ei naase kujund oma algsesse olekusse ja jääb igaveseks peidus. Veetsin palju aega dokumentide lugemisele, kuid ma ei leidnud ikkagi võimalust piirata objektide pukseerimisala. Arusaam tuli ootamatult. Ma ei pea üldse pinda piirama, ma pean teadma, kas kasutaja vabastas kuju õigesti või mitte.
Õige vabastamise määramine
Leidsin vastused oma küsimustele Androidi arendajate veebisaidi jaotisest „Puhistamislõpu sündmuste käsitlemine”. Siin on mõned põhipunktid.
Seega pean peatama sündmuse ACTION_DRAG_ENDED ja kutsuma meetodit getResult. Kui see tagastab vale, siis on kasutaja lohistanud tüki tahvlilt maha ja ma pean seadma ImageView nähtavale režiimile.
@ Alista avalik tõeväärtus onDrag(vaatevaade, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (vaade) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( includeDragable= false ; ) if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( includeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE)Action= (View. VISIBLE)Action ; = ACTION_DROP& amp;& amp; sisaldab Dragable) ( checkForValidMove((ChessBoardSquareLayoutView) vaade, dragView) ) )Nüüd saab kasutaja figuuri kõikjal vabastada ja midagi hullu ei juhtu.
Kehtivate käikude määratlusArtikli viimane osa on pühendatud kasutaja tehtud käigu õigsuse kontrollimisele. Enne selle teema üksikasjalikku käsitlemist teen lühikese märkuse oma taotluse ülesehituse kohta. Malelaud on esitatud tabelipaigutusena ja iga lahter on LinearLayouti alam ja sellel on OnDragListener.
Lisaks viitab iga OnDragListener "vahendaja" objektile, mis hoolitseb mänguobjektide interaktsiooni eest ja jätab meelde praeguse lahtri asukoha.
Kui kasutaja lohistab tüki üle lahtri, on võimalikud järgmised toimingud.
Allpool on kood, mis rakendab kirjeldatud loogikat
@ Alista avalik tõeväärtus onDrag(vaatevaade, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (vaade) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( includeDragable= false ; ) if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( includeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE)Action= (View. VISIBLE)Action ; = DragEvent ACTION_DROP& amp;& amp;Nagu näete, viiakse ImageView nähtavasse olekusse olenemata sellest, kas liigutus on kehtiv või mitte. Tahtsin, et kasutaja näeks kuju liikumist. Mainisin varem, et lahter on LayoutView alam. Seda tehakse selleks, et hõlbustada ImageView teisaldamist lahtrist lahtrisse. Allpool on kood meetodi checkForValidMove jaoks, mis näitab, kuidas ImageView liigub.
private void checkForValidMove(ChessBoardSquareLayoutView vaade, View dragView) ( if (mediaator. isValidMove(view) ) ( ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; vaade. setGravity (Gravity. CENTER) vaade.Loodan, et see artikkel aitab teil oma projekte arendada.
Kui GUI elemendid on rakendatud pseudograafia abil), kasutades hiirt või puuteekraani.
Meetodit rakendatakse "hõive" abil (vajutades ja hoides all peamist ( esiteks, tavaliselt hiire vasak nupp) arvutiekraanil kuvatava objekti kohta, mis on programmiliselt selliseks toiminguks saadaval, ja selle teise kohta teisaldamiseks (asukoha muutmiseks) või teisele elemendile "viskamiseks" (vastava toimingu kutsumiseks). programmi järgi). Seoses akendega (samuti võimelised liikuma sarnaselt) seda terminit tavaliselt ei kasutata.
Põhitoimingud ja pukseerimistoimingute lihtsaimad näited on: objekti liigutamine, objekti teisaldamine paneelilt paneelile, kuigi tänapäevastes operatsioonisüsteemides kasutatakse pukseerimist laialdaselt ja see on üks peamisi viise, kuidas graafilise liidese kasutaja arvuti.
Liikumise objektideks võivad olla järgmised liidese elemendid: Töölaua ikoonid, ujuvad tööriistaribad, programmi otseteed tegumiribal (alates Win XP-st), TreeView elemendid, tekstistring, DataGridView lahter, ka OLE elemendid. Objektid võivad liikuda nii teatud piirkonnas, ühe akna sees, ühe akna paneelide vahel kui ka erinevate akende vahel.
Lohistamissündmuse peab käivitama mõni kasutaja tegevus. Enamasti on selleks toiminguks hiire vasaku nupu vajutamine elemendil (selle sündmuse nimi on MouseDown), mida saab selle konteineris teisaldada. Mõnel komponendil on oma drag-n-drop käivitussündmused – näiteks TreeView-l on ItemDrag sündmus.
Wikimedia sihtasutus. 2010. aasta.
Vaadake, mis on "lohistamine" teistes sõnaraamatutes:Lohista - 〈[ dræg ənd drɔ̣p] n.; ; unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [ingl. lohista „ziehen“ + ja „und“ + kukuta „kukkunud… … Universal-Lexikon
Graafilises kasutajaliideses mis tahes toimingute sooritamise vorm, mis hõlmab arvutihiire kasutamist. Inglise keelest tõlgituna tähendab see sõna-sõnalt: lohista ja viska. Toiming sooritatakse ekraanil nähtaval tegutsedes... ... Äriterminite sõnastik
lohistamine – (arvutamine) Ikooni, faili vms liigutamiseks üle ekraani hiire abil ja vabastamiseks teises kohas (dragˈ and dropˈ omadussõna) Põhikirje: lohista … Kasulik inglise sõnaraamat
lohistamine – IT, et liigutada midagi arvutiekraani ühest alast teise hiire abil: »Tarkvara võimaldab lohistada elemente lehe piltide, teksti jms jaoks. kuhu iganes tahad. Põhikirje: lohista… Finants- ja äritingimused
lohistama – UK USA tegusõna n.; Gen.: ; Pl.: unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird )
