Vedä ja pudota -tekniikan yleiset kysymykset ja teoria. Vedä ja pudota -tekniikka Androidissa Katso, mitä "vedä ja pudota" on muissa sanakirjoissa
182
Tässä esimerkissä valitsemme div-elementin ja teemme siitä siirrettävän kutsumalla siinä olevaa draggable()-metodia. Kuten alla olevasta kuvasta näkyy, avatussa dokumentissa elementti ottaa tavallisen asemansa, mutta sen jälkeen se voidaan siirtää hiiren osoittimella mihin tahansa selainikkunan kohtaan:
Mahdollisuus vetää ja pudottaa elementtejä on hyödyllinen yksinään, mutta se on vielä hyödyllisempi, kun sitä käytetään yhdessä pudotettavan vuorovaikutuksen kanssa, joka kuvataan seuraavassa.
Vedettävä vuorovaikutus saavutetaan yksinomaan käyttämällä tiettyjä HTML-merkintöjä ja CSS-tyylejä. Tämä tarkoittaa, että tämä toiminto toimii lähes kaikissa selaimissa, mutta sillä varustetut elementit eivät voi toimia vastaavien alkuperäisten vedä ja pudota -työkalujen kanssa. käyttöjärjestelmät.
HTML5-spesifikaatioiden määrittämät vedä ja pudota -toiminnot toteutetaan tyypillisesti käyttämällä alkuperäisiä käyttöjärjestelmän mekanismeja. Jos käytät jQuery-käyttöliittymän vedä ja pudota -mekanismia, on parempi poistaa vastaavat HTML5-ominaisuudet käytöstä ristiriitojen välttämiseksi. Voit tehdä tämän asettamalla asiakirjan body-elementin draggable-attribuutin arvoon false.
Vedettävän vuorovaikutuksen määrittäminenVedettäville vuorovaikutuksille on monia mukautusvaihtoehtoja. Tärkeimmät ominaisuudet, joita käsitellään seuraavissa osioissa, on esitetty alla olevassa taulukossa:
| akseli | Rajoittaa kykyä liikkua tiettyihin suuntiin. Oletusarvo on false, mikä tarkoittaa, että rajoituksia ei ole, mutta voit myös määrittää arvon "x" (siirrä vain X-akselia pitkin) tai "y" (liikku vain Y-akselia pitkin) |
| eristämiseen | Rajoittaa siirrettävän elementin sijainnin tietylle näytön alueelle. Tuettujen arvojen tyypit on kuvattu alla olevassa taulukossa vastaavan esimerkin avulla. Oletusarvo on false, mikä tarkoittaa, että rajoituksia ei ole |
| viive | Määrittää, kuinka kauan elementtiä on vedettävä ennen kuin se liikkuu. Oletusarvo on 0, mikä tarkoittaa, ettei viivettä |
| etäisyys | Määrittää etäisyyden, jonka käyttäjän täytyy vetää elementtiä sen aloituspaikasta ennen kuin se todella liikkuu. Oletusarvo on 1 pikseli |
| ruudukko | Pakottaa siirretyn elementin napsauttamisen ruudukon soluihin. Oletusarvo on false, mikä tarkoittaa, ettei sidontaa ole |
Voit rajoittaa elementin liikettä useilla tavoilla tiettyihin suuntiin. Ensimmäinen on käyttää akselivaihtoehtoa, jonka avulla voit rajoittaa liikkeen suunnan X- tai Y-akselille. Esimerkki tästä on alla:
... div.dragElement (fontin koko: iso; reuna: ohut tasainen musta; täyte: 16px; leveys: 8em; tekstin tasaus: keskellä; taustaväri: vaaleanharmaa; marginaali: 4px) $(function() ( $ (.dragElement").draggable(( axis: "x")).filter("#dragV").draggable("optio", "axis", "y"); )); Vedä pystysuunnassa Vedä vaakasuunnassa Suorita esimerkki
Tässä esimerkissä määritämme kaksi div-elementtiä, valitsemme ne jQuerylla ja kutsumme draggable()-metodia. Argumenttina tälle menetelmälle annamme objektin, joka aluksi rajoittaa molempien div-elementtien liikkeen X-akselin suuntaan. Tämän jälkeen käyttämällä jQuery filter() -menetelmää voimme valita dragV-elementin ilman, että jQuery etsii koko dokumentti uudelleen ja aseta se toiseen sallittuun liikesuuntaan - pitkin Y-akselia, jolloin saadaan dokumentti, jossa yhtä div-elementtiä voidaan vetää vain pystysuunnassa ja toista - vain vaakasuunnassa. Tulos näkyy kuvassa:
Voit myös rajoittaa näytön aluetta, jolla voit vetää kohteen. Käytä tätä varten suojausvaihtoehtoa. Tässä vaihtoehdossa määritettävissä olevat arvomuodot on kuvattu alla olevassa taulukossa:
Alla on esimerkki suojausvaihtoehdon käytöstä:
... div.dragElement (fontin koko: iso; reuna: ohut tasainen musta; täyte: 16px; leveys: 8em; tekstin tasaus: keskellä; taustaväri: vaaleanharmaa; marginaali: 4px ) #container ( reunus: keskikokoinen kaksois musta; leveys: 700px; korkeus: 450px) $(function() ( $(".dragElement").draggable(( Sisältö: "parent" )).filter("#dragH").draggable("optio", " akseli", "x"); )); Vedä vaakasuunnassa Vedä ylätason sisään Suorita esimerkki
Tässä esimerkissä molempien elementtien liikkumiskyky on rajoitettu, joten niitä voidaan vetää vain yläelementin sisällä, joka on kiinteän kokoinen div. Yhdellä kellutettavista diveistä on lisärajoitus, että se kellutetaan käyttämällä akselivaihtoehtoa, koska se voi liikkua vain vaakasuunnassa ylätason sisällä. Tulos on havainnollistettu kuvassa:
Ruudukkovaihtoehdon avulla voit määrittää siirretyn elementin sidonnan ruudukon soluihin. Tämä vaihtoehto ottaa arvona kahden elementin taulukon, joka määrittää ruudukon solujen leveyden ja korkeuden pikseleinä. Alla on esimerkki ruudukkovaihtoehdon käytöstä:
... #draggable (fontin koko: x-large; reunus: ohut tasainen musta; leveys: 5em; tekstin tasaus: keskellä; täyte: 10px) $(function() ( $("#draggable").draggable( (ruudukko: )); )); Vedä minua Suorita esimerkki
Tämä esimerkki määrittää ruudukon, jonka solut ovat 100 pikseliä leveitä ja 50 pikseliä korkea. Kun vedät elementin, se "hyppää" yhdestä (näkymättömästä) solusta toiseen. Snapping-efekti on loistava esimerkki siitä, kuinka vuorovaikutustoimintoja voidaan käyttää, mutta sitä on vaikea välittää kuvakaappauksilla.
Voit luoda napsautustehosteen vain yhteen suuntaan asettamalla vapaan liikkeen akseliksi 1. Jos esimerkiksi asetat ruudukkoasetukseksi , elementti napsahtaa 100 pikselin levyisiin ruudukkosoluihin, kun sitä liikutetaan vaakasuunnassa, mutta liikkuu vapaasti pystysuunnassa.
Siirron viiveOn kaksi vaihtoehtoa, joiden avulla voit viivyttää liikkuvan elementin vetämistä. Viive-asetuksen avulla voit määrittää millisekunteina ajan, jonka käyttäjän on vedettävä hiiren osoitinta ennen kuin elementti siirretään. Toisenlaisen viiveen tarjoaa etäisyysvaihtoehto, joka määrittää pikseleinä etäisyyden, joka käyttäjän on vedettävä hiiren osoitinta ennen kuin elementti seuraa sitä.
Alla on esimerkki molempien asetusten käytöstä:
... #aika, #etäisyys (fontin koko: iso; reuna: ohut, tasainen musta; täyte: 10px; leveys: 120px; tekstin tasaus: keskellä; taustaväri: vaaleanharmaa; marginaali: 4px; ) $(function( ) ( $("#aika").draggable(( viive: 1000 )) $("#etäisyys").draggable(( etäisyys: 150 )) )); Lohko aikaviiveellä Lohko minimimatkalla Juokseesimerkki
Tässä esimerkissä on kaksi siirrettävää elementtiä, joista toinen on viivästetty käyttämällä viivevaihtoehtoa ja toinen viivästetty käyttämällä etäisyysvaihtoehtoa.
Jos kyseessä on viive-asetuksen määrittämä viive, käyttäjän on vedettävä tietty aika, ennen kuin se todella siirtää elementin. Tässä esimerkissä tämän ajanjakson kesto on 1000 ms. Hiirtä ei tarvitse liikuttaa tässä vaiheessa, mutta koko viivejakson ajan hiiren painiketta on pidettävä painettuna, minkä jälkeen elementtiä voidaan siirtää liikuttamalla hiirtä. Kun viiveaika on kulunut umpeen, siirrettävä elementti napsahtaa hiiren osoittimen sijaintiin edellä käsiteltyjen ruudukon, alueen ja akselivaihtoehtojen asettamien rajoitusten mukaisesti.
Etäisyysvaihtoehdolla on samanlainen vaikutus, mutta tässä tapauksessa käyttäjän tulee vetää hiiren osoitinta vähintään tietty määrä pikseleitä mihin tahansa suuntaan elementin aloituspaikasta. Siirrettävä elementti hyppää sitten osoittimen nykyiseen sijaintiin.
Jos käytät molempia asetuksia samaan elementtiin, siirretty elementti ei liiku ennen kuin molemmat viiveehdot täyttyvät, ts. kunnes yritys vetää elementtiä kestää tietyn ajan ja kunnes hiiren osoitin siirtää tietyn määrän pikseleitä.
Vedettävien vuorovaikutusmenetelmien käyttäminenKaikki vedettävän vuorovaikutuksen menetelmät ovat osa perusmenetelmiä, jotka olet jo nähnyt widgetejä tarkastellessasi. Vedettävälle vuorovaikutukselle ei ole erityisiä menetelmiä, joten emme käsittele niitä yksityiskohtaisesti. Luettelo käytettävissä olevista menetelmistä on alla olevassa taulukossa:
Vedettävien vuorovaikutustapahtumien käyttäminenInteraction Draggable tukee yksinkertaisia tapahtumia, jotka ilmoittavat sinulle, kun elementtiä vedetään. Nämä tapahtumat on kuvattu alla olevassa taulukossa:
Kuten widget-tapahtumiin, myös näihin tapahtumiin voidaan vastata. Alla on esimerkki aloitus- ja lopetustapahtumien käsittelystä:
... #draggable (fontin koko: x-large; reuna: ohut tasainen musta; leveys: 190px; tekstin tasaus: keskellä; täyte: 10px) $(function() ( $("#draggable").draggable( ( start: function() ( $("#draggable").text("Vedä minua..."), stop: function() ( $("#draggable").text("Vedä minua") ) )) ;)); Vedä minua Suorita esimerkki
Tämä esimerkki käyttää aloitus- ja lopetustapahtumia elementin tekstisisällön muuttamiseksi sitä vedettäessä. Tämä etu johtuu siitä, että Draggablen vuorovaikutus toteutetaan kokonaan HTML:n ja CSS:n avulla: jQueryn avulla voit muuttaa vedettävän elementin tilaa, vaikka se liikkuu näytöllä.
Pudotettavan vuorovaikutuksen käyttäminenElementin vetäminen yksin saattaa riittää joissakin tilanteissa, mutta se on hyödyllisintä, kun sitä käytetään pudotettavan vuorovaikutuksen yhteydessä.
Elementit, joihin on sovellettu pudotettavaa vuorovaikutusta (vastaanottavat elementit), saavat mahdollisuuden hyväksyä vedettävällä vuorovaikutuksella luotuja liikkuvia elementtejä.
Vastaanottavat elementit luodaan droppable()-menetelmällä, mutta hyödyllisten toimintojen saamiseksi sinun on luotava tapahtumakäsittelijät tämän tyyppiselle vuorovaikutukselle määritettyjen joukosta. Käytettävissä olevat tapahtumat näkyvät alla olevassa taulukossa:
| luoda | Tapahtuu, kun elementtiin sovelletaan pudotettavaa vuorovaikutusta |
| aktivoida | Tapahtuu, kun käyttäjä alkaa vetää siirrettävää elementtiä |
| deaktivoida | Ilmenee, kun käyttäjä lopettaa siirrettävän elementin vetämisen |
| yli | Tapahtuu, kun käyttäjä vetää kelluvan elementin vastaanottavan elementin päälle (edellyttäen, että hiiren painiketta ei ole vielä vapautettu) |
| ulos | Tapahtuu, kun käyttäjä vetää siirrettävän elementin vastaanottavan elementin ulkopuolelle |
| pudota | Tapahtuu, kun käyttäjä poistuu siirrettävästä elementistä vastaanottavan elementin päällä |
Alla on esimerkki yksinkertaisen vastaanottoelementin luomisesta, jolle on määritetty yhden pudotuksen tapahtumakäsittelijä:
... #vedettävä, #pudotettava (kirjasinkoko: iso; reuna: ohut tasainen musta; täyte: 10px; leveys: 100px; tekstin tasaus: keskellä; taustaväri: vaaleanharmaa; marginaali: 4px;) #pudotettava (täyttö : 20px; sijainti: absoluuttinen; oikea: 5px;) $(function() ( $("#draggable").draggable(); $("#pudotettava").droppable(( drop: function() ( $(") #draggable").teksti("Vasen") ) )); )); Jätä minut tähän Vedä minua Suorita esimerkki
Tämä esimerkki lisää div-elementin dokumenttiin, jonka tekstisisältöä edustaa merkkijono "Jätä tästä". Valitsemme tämän elementin jQuerylla ja kutsumme droppable()-metodia välittäen sille asetusobjektin, joka määrittää pudotustapahtuman käsittelijän. Vastaus tähän tapahtumaan on muuttaa siirrettävän elementin tekstiä text()-menetelmällä.
Tässä esimerkissä luotu Vedä ja pudota -vuorovaikutus on yksinkertainen, mutta se tarjoaa hyödyllisen kontekstin selittämään, kuinka vedettävä ja pudotettava vuorovaikutus toimivat yhdessä. Elementtien vetämisprosessin eri vaiheet on havainnollistettu kuvassa:
Kaikki näyttää hyvin yksinkertaiselta. Vedämme siirrettävää elementtiä, kunnes se on vastaanottavan elementin yläpuolella ja vapautamme sen. Pudotettu elementti pysyy siinä, mihin se jätettiin, ja sen tekstisisältö muuttuu pudotustapahtuman seurauksena. Seuraavissa osioissa näytetään, kuinka voit käyttää muita pudotettavia vuorovaikutustapahtumia käyttökokemuksen parantamiseksi.
Kohteen vastaanottavan kohteen valaistusAktivointi- ja deaktivointitapahtumien avulla voit korostaa kohteen vastaanottavan objektin, kun käyttäjä alkaa vetää elementtiä. Monissa tilanteissa tämä idea on erittäin hedelmällinen, koska se antaa käyttäjälle luotettavan opastuksen siitä, mitkä elementit ovat osa vedä ja pudota -mallia. Alla on vastaava esimerkki:
... $(function() ( $("#draggable").draggable(); $("#pudotettava").droppable(( drop: function() ( $("#draggable").text("Vasen ") ), aktivoi: function() ( $("#pudotettava").css(( reunus: "keskikokoinen kaksoisvihreä", taustaväri: "vaaleanvihreä" )); ), deaktivoi: function() ( $("#pudotettava" ").css("border", "").css("taustaväri", ""); ) )); )); ...Suorita esimerkki
Heti kun käyttäjä alkaa vetää elementtiä, vastaanottavaan elementtiin liittyvä aktivointitapahtuma käynnistyy, ja käsittelijäfunktio käyttää css()-metodia muuttaakseen elementin reunuksen ja taustavärin CSS-ominaisuudet. Tämän seurauksena kohteen vastaanottava elementti korostuu, mikä osoittaa käyttäjälle, että sen ja siirrettävän elementin välillä on yhteys.
Deaktivointitapahtumaa käytetään poistamaan CSS-ominaisuusarvot vastaanottavasta elementistä ja palauttamaan se alkutila, heti kun käyttäjä vapauttaa hiiren painikkeen. (Tämä tapahtuma tapahtuu aina, kun elementin vetäminen pysähtyy, riippumatta siitä, onko vedettävä elementti jätetty vastaanottavaan elementtiin vai ei.) Tämä prosessi on havainnollistettu kuvassa:
Vedä ja pudota -tekniikkaa voidaan parantaa lisäämällä yli ja ulos tapahtumien käsittelyä. Yli-tapahtuma tapahtuu, kun 50 % siirrettävästä elementistä on minkä tahansa vastaanottavan elementin osan päällä. Out-tapahtuma tapahtuu, kun aiemmin päällekkäiset elementit eivät enää mene päällekkäin. Alla on esimerkki reaktioista näihin tapahtumiin:
$(function() ( $("#draggable").draggable(); $("#pudotettava").pudotettava(( pudota: function() ( $("#draggable").text("Left") ) , aktivoi: function() ( $("#pudotettava").css(( reunus: "keskikokoinen kaksoisvihreä", taustaväri: "vaaleanvihreä" )); ), deaktivoi: function() ( $("#pudotettava"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( reunus: "keskikokoinen kaksoispunainen", taustaväri : "punainen" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Suorita esimerkki
Tässä käytetään samoja käsittelijän toimintoja kuin edellisessä esimerkissä, mutta tässä tapauksessa ne liittyvät over and out -tapahtumiin. Kun vastaanottava elementti on päällekkäin vähintään 50 % siirrettävästä elementistä, se suljetaan kehykseen ja sen taustaväri muuttuu kuvan osoittamalla tavalla:
Tätä 50 % rajaa kutsutaan limityskynnykseksi (toleranssiksi), jonka arvo voidaan asettaa vastaanottoelementtiä luotaessa, kuten myöhemmin näytetään.
Pudotettavien vuorovaikutusten määrittäminenPudotettavalla vuorovaikutuksella on useita ominaisuuksia, joita voit muokata sen käyttäytymisen muokkaamiseksi. Nämä ominaisuudet on lueteltu alla olevassa taulukossa:
| liikuntarajoitteinen | Jos tämä vaihtoehto on tosi, pudotettava vuorovaikutustoiminto on aluksi pois käytöstä. Oletusarvo on false |
| hyväksyä | Supistaa siirrettävien elementtien joukkoa, joihin vastaanottava elementti reagoi. Oletusarvo on *, joka vastaa mitä tahansa elementtiä |
| aktiivinen luokka | Määrittää luokan, joka määritetään vastauksena aktivointitapahtumaan ja poistetaan vastauksena deaktivointitapahtumaan |
| hoverClass | Määrittää luokan, joka määritetään vastauksena yli-tapahtumaan ja poistetaan vastauksena ulos-tapahtumaan |
| toleranssi | Määrittää päällekkäisyyden vähimmäisasteen, jolla ylitystapahtuma tapahtuu |
Voit rajoittaa pudotettavien elementtien joukkoa, jotka pudotettavan yhteentoimivuustoiminnon omaava elementti hyväksyy, käyttämällä hyväksymisvaihtoehtoa. Hyväksymisvaihtoehdon arvoksi tulee asettaa valitsin. Tämän seurauksena pudotettavat vuorovaikutustapahtumat tapahtuvat vain, jos siirrettävä elementti vastaa määritettyä valitsinta. Alla on vastaava esimerkki:
... .vedettävä, #pudotettava (kirjasinkoko: iso; reunus: ohut yksivärinen musta; täyte: 10px; leveys: 100px; tekstin tasaus: keskellä; taustaväri: vaaleanharmaa; marginaali: 4px;) #pudotettava (täyttö : 20px; sijainti: absoluuttinen; oikea: 5px;) $(function() ( $(".draggable").draggable(); $("#droppable").droppable(( drop: function(event, ui) ui.draggable.text("Left") ), aktivoi: function() ( $("#droppable").css(( reunus: "keskikokoinen kaksoisvihreä", backgroundColor: "lightGreen" )); ), deaktivoi: toiminto () ( $("#droppable").css("border", "").css("background-color", ""); ), hyväksy: "#drag1" )); )); Jätä tähän Elementti 1 Element 2 Suorita esimerkki
Tässä esimerkissä on kaksi vedettävää elementtiä, joiden tunnukset ovat drag1 ja drag2. Vastaanottavaa elementtiä luotaessa käytämme hyväksymisvaihtoehtoa, jolla osoitamme, että vain drag1-elementti on hyväksyttävä siirrettävä elementti.
Kun vedät drag1-elementtiä, näet saman tehosteen kuin edellisissä esimerkeissä. Sopivina aikoina aktivointi-, deaktivointi-, yli- ja ulos-tapahtumat laukaistaan vastaanottavalle elementille. Samanaikaisesti, jos vedät drag2-elementin, joka ei vastaa hyväksymisparametrissa määritettyä valitsinta, näitä tapahtumia ei käynnistetä. Tätä elementtiä voidaan liikuttaa vapaasti, mutta vastaanottava elementti ei havaitse sitä.
Huomaa muutos siinä, miten valitsemme hyväksyttävän kelluvan elementin, jolle kutsutaan text()-metodia. Kun dokumentissa oli vain yksi liikkuva elementti, id-attribuutti riitti tähän:
Pudota: function() ( $("#draggable").text("Left") ),
Tässä esimerkissä on kaksi kelluvaa elementtiä, ja valinta id-attribuutilla ei tuota toivottua tulosta, koska teksti muuttuu tässä tapauksessa aina samassa kelluvassa elementissä riippumatta siitä, kumpi on hyväksyttävä vastaanottavalle elementille.
Ratkaisu on käyttää ui-objektia, jonka jQuery UI tarjoaa lisäargumenttina jokaiselle tapahtumakäsittelijälle. UI-objektin vedettävissä oleva ominaisuus palauttaa jQuery-objektin, joka sisältää elementin, jonka käyttäjä vetää tai yrittää pudottaa kohdeelementtiin, jolloin haluttu elementti voidaan valita seuraavasti:
Pudota: function(tapahtuma, ui) ( ui.draggable.text("Left") ),
Päällekkäisyyden rajan muuttaminenOletusarvoisesti ylitapahtuma tapahtuu vain, kun vähintään 50 % siirrettävästä elementistä on päällekkäin vastaanottavan elementin kanssa. Tämän kynnyksen päällekkäisyyden määrää voidaan muuttaa toleranssivaihtoehdolla, joka voi ottaa alla olevassa taulukossa näkyvät arvot:
Kaksi useimmin käyttämäni arvoa ovat sovi ja kosketa, koska ne ovat käyttäjien kannalta järkevimpiä. Käytän sovitusta, kun vedetyn elementin on pysyttävä vastaanottavan elementin alueella, johon se siirrettiin, ja kosketusta, kun vedetyn elementin on palattava alkuperäiseen asentoonsa (esimerkki annetaan alla). Alla on esimerkki sovitus- ja kosketusparametrien käytöstä:
Klooniarvo käskee jQuery-käyttöliittymää luomaan kopion siirrettävästä elementistä ja sen kaikesta sisällöstä ja käyttämään tuloksena saatua tulosta apuelementtinä. Tulos näkyy kuvassa:
Apuelementti poistetaan, kun käyttäjä vapauttaa hiiren painikkeen siirrettävän elementin päällä, jolloin siirrettävä elementti ja vastaanottava elementti jäävät alkuperäisille paikoilleen.
Kuten kuvasta näkyy, alkuperäinen siirrettävä elementti pysyy paikallaan ja vain apuelementti liikkuu näytöllä hiiren osoitinta seuraten. Jos siirrettävän elementin koko on suuri, kuten esimerkissämme, niin se peittää loput dokumenttielementit, joten käyttäjän on vaikea edes seurata vastaanottavan elementin sijaintia. Tämä ongelma voidaan ratkaista antamalla funktio apuvaihtoehdon arvoksi alla olevan esimerkin mukaisesti:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#kori").droppable(( activeClass: "aktiivinen", hoverClass: "hover" )); )); ...Suorita esimerkki
Kun käyttäjä alkaa vetää elementtiä, jQuery UI kutsuu helper-parametrin määrittämän funktion ja käyttää palautettua elementtiä vedettävänä objektina. Tässä tapauksessa käytän jQueryä img-elementin luomiseen. Tulos näkyy kuvassa:
Pieni kuva toimii välityspalvelimena siirrettävälle elementille, mikä helpottaa asiakirjan muiden elementtien seurantaa.
Käyttöliittymäobjekti, jonka jQuery UI välittää pudotettaville vuorovaikutustapahtumille, sisältää auttajaominaisuuden, ja tätä ominaisuutta voidaan käyttää ohjaamaan auttajaa sitä vedettäessä. Alla on esimerkki tämän ominaisuuden käyttämisestä over and out -tapahtumien yhteydessä:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#kori").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "paksu solid #27e6ed") ) , out: function(tapahtuma, ui) ( ui.helper.css("border", "") ) )); )); ...
Tässä over and out -tapahtumia ja ui.helper-ominaisuutta käytetään näyttämään reunus apuelementin ympärillä, kun se on päällekkäin vastaanottavan elementin kanssa. Tulos näkyy kuvassa:
Snap-vaihtoehdon avulla voit varmistaa, että siirretty elementti "vetyy" niiden elementtien reunoihin, joiden vieressä se kulkee. Tämä vaihtoehto hyväksyy valitsimen arvoksi. Siirrettävä elementti napsahtaa minkä tahansa määritettyä valitsinta vastaavan elementin reunoihin. Alla on esimerkki snap-vaihtoehdon käytöstä:
Suorita jQuery-käyttöliittymän esimerkki #snapper, .draggable, .droppable (fontin koko: suuri; reunus: keskikokoinen musta; täyte: 4 kuvapistettä; leveys: 150 kuvapistettä; tekstin tasaus: keskellä; taustaväri: vaaleanharmaa; marginaali alareuna: 10 kuvapistettä ;).pudotettava (marginaali-oikea: 5px; korkeus: 50px; leveys: 120px) #dropContainer (sijainti: absoluuttinen; oikea: 5px;) div span (sijainti: suhteellinen; ylhäällä: 25%) .pudotettava.aktiivinen (reuna: keskivahva vihreä) .pudotettava.hover (taustaväri: vaaleanvihreä) #snapper (sijainti: absoluuttinen; vasen: 35%; reunus: keskitasoinen musta; leveys: 180px; korkeus: 50px) $(function() ( $(") div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "molemmat", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); Kärry Napsauta tästä Vedä minua
Kun liikkuva elementti lähestyy jotakin sopivaa elementtiä, se ikään kuin "vetyy" siihen niin, että niiden viereiset reunat koskettavat. Tällaista sidontaa varten voit valita minkä tahansa elementin, ei vain vastaanottavaa elementtiä. Tässä esimerkissä lisäsin div-elementin ja asetin snap-asetukseksi arvon, joka valitsee kyseisen elementin sekä vastaanottavan elementin asiakirjassa.
On olemassa pari apuvaihtoehtoa, joiden avulla voit muokata elementtien ankkurointikäyttäytymistä tarkemmin. Yksi niistä on snapMode-vaihtoehto. Sen avulla voit määrittää sidontatyypin. Seuraavat arvot ovat sallittuja: sisäinen(kiinnitä elementtien sisäreunoihin), ulompi(napsauta elementtien ulkoreunoihin) ja molemmat(kiinnitä kaikkiin reunoihin; oletus).
SnapTolerance-asetuksen avulla voit määrittää, kuinka pitkälle kelluvan elementin tulee lähestyä kohdeelementin reunaa ennen kuin napsautus tapahtuu. Oletusarvo on 20, mikä tarkoittaa 20 pikseliä. Esimerkissä käytetään arvoa 50, joka vastaa katkaisua suuremmalla etäisyydellä. On erittäin tärkeää valita oikea arvo tälle vaihtoehdolle. Jos snapTolerance-arvo on liian alhainen, käyttäjä ei välttämättä huomaa napsautusvaikutusta, ja jos se on liian korkea, siirrettävä elementti alkaa tehdä odottamattomia hyppyjä, jotka napsahtavat etäisiin elementteihin.
Tekniikan käyttö raahaa ja pudota(vedä ja pudota) antaa käyttäjän siirtää erilaisia objekteja yhdestä toiseen, esimerkiksi listan elementtejä toiseen. Tätä varten sinun on käytettävä kahta säädintä: pesuallas ja lähde. Vastaanotin on kohde, joka vastaanottaa lähdeobjektin (siirrettävän kohteen).
Kohteiden liikkumisen aikana tapahtuvat tapahtumat on lueteltu alla siinä järjestyksessä, jossa ne tapahtuvat.
OnStartDrag(kirjoita TStartDragEvent) - toiminnan alussa, lähdeobjektin luoma. Tapahtumakäsittelijälle välitettävät parametrit: DragObject-vastaanotinobjekti (TDragObject-tyyppi), lähdeobjekti (TObject-tyyppi).
OnDragOver(tyyppi TDragOverEvent) - luo vastaanotinobjektin, kun vedetty objekti on sen päällä. Tapahtumakäsittelijälle välitettävät parametrit: vastaanotinobjekti Lähettäjä (tyyppi TObject), lähdeobjekti Lähde (tyyppi TObject), liiketila Tila (tyyppi TDragState), X ja Y (tyyppi kokonaisluku) - hiiren osoittimen nykyiset koordinaatit, Hyväksy ( tyyppi boolean ) merkki siirtotoiminnon vahvistuksesta. Liiketila osoittaa, onko siirrettävä kohde vastaanotinalueella, liikkuuko siinä vai onko se poistunut sieltä. Hyväksyttyjen parametrien avulla kohdeobjekti voi hyväksyä tai hylätä lähdeobjektin. Hyväksy-parametrin arvoksi on asetettu Trye, jos siirtotoiminto hyväksytään, muussa tapauksessa se on asetettu arvoon False.
onDragDrop (tyyppi TDragDropEvent) - vastaanotinobjektin luoma, kun vedetty objekti pudotetaan sen päälle. Tapahtumakäsittelijälle välitetään hiiren osoittimen, Lähettäjä-vastaanotinobjektin (TObject-tyyppi) ja alkuperäisen liikeobjektin Lähteen (TObject-tyyppi) nykyiset koordinaatit.
onEndDrag (EndDragEvent-tyyppi) - Nostetaan, kun vetämistoiminto on valmis. Sen pisteen X- ja Y-koordinaatit, jossa lähdelähettäjäobjekti ja vastaanottajakohdeobjekti välitetään tapahtumakäsittelijälle.
Vedä ja pudota -toiminnon luomiseksi riittää toteuttaa kaksi tapahtumaa: OnDragDrop ja OnDragOver DragMode-ominaisuuden ollessa dmAutomatic. Muussa tapauksessa ohjelmoijan on koodattava vetämistoiminnon aloitus, BeginDrag-menetelmä.
Luomme seuraavan sovelluksen materiaalin yhdistämiseksi. Aseta paneelikomponentti lomakkeelle. Aseta Object Inspectorin DragMode-ominaisuuden arvoksi dmAutomatic. Valitaan lomakeobjekti ja luodaan seuraavat tapahtumat Object Inspectorin avulla:
Toimenpide TForm1.FormDragOver(Lähettäjä, lähde: TObject; X, Y: kokonaisluku; tila: TDragState; var Hyväksy: Boolean); aloita jos Lähde = Paneeli1 sitten Hyväksy:= Tosi muuten Hyväksy:= False; loppu; menettely TForm1.FormDragDrop(Lähettäjä, Lähde: TObject; X, Y: Integer); aloita Paneeli1.Left:= X; Paneeli1.Yläosa:= Y; loppu;
Nyt käynnistämällä sovelluksen ja napsauttamalla hiiren painiketta paneelin yläpuolella, voimme siirtää paneeliobjektia läpi lomakkeen.
Bottom line: tutustuimme tekniikkaan raahaa ja pudota(vedä ja pudota) ja käytti sitä käytännössä.
Vedä ja pudota -tekniikat ovat kehittyneet vuosien aikana. Ei ole yllätys, että avoimen lähdekoodin laajennuksia (kuten jQuery) kehittävien ohjelmoijien lisääntyessä vanhoja menetelmiä herätetään henkiin. JavaScript-kirjasto on erittäin herkkä ja tarjoaa monia parannuksia tällä verkkoteknologian aikakaudella.
Tässä opetusohjelmassa teemme skriptin, jonka avulla voit luoda dynaamisia vedä ja pudota -suorakulmioita verkkosivustollesi. Prosessia hallinnoi jQuery. Tällaiset skriptit säästävät aikaa tarjoamalla valmiita toimintoja! Ja vedä ja pudota -kirjastoa voidaan käyttää muissa projekteissa.
Ensinnäkin valmistetaan pieni verkkosivusto projektia varten. Projektikansioon on luotava kaksi hakemistoa merkittävillä nimillä "js" ja "css" sekä tyhjä tiedosto index.html. Koodi tulee olemaan hyvin yksinkertainen, jotta työstä on selkeä käsitys ja jatkokehityksessä on aihetta.
Alla on koodi HTML-tiedostollemme. Luvussa pää mukana 3 skriptiä. JQuery-pääskripti ladataan Google Code -palvelimelta. Mukana on myös tyylitiedostomme style.css, joka sisältää muodostuksen tärkeimmät ominaisuudet ulkomuoto asiakirjamme.
Vedä minua Kyllä, kyllä. Juuri minä. Voit myös vetää minua ( zIndex: 200, peittävyys: .9 )
P.S.: voit jättää minut minne tahansa!
Sisäosa kehon vain kaksi lohkoa asetetaan div, jotka sisältävät molemmat suorakulmiot. Koodi on melko yksinkertainen ja ymmärrettävä. Jokaisen suorakulmion sisällä on otsikot luokkakäsittelijällä ja käsittelijällä2. Tämä on tärkeää, koska jokainen suorakulmio käyttäytyy eri tavalla vetäessäsi.
HTML-koodi on hyvin yksinkertainen. Jos ymmärrät perusmerkinnät, CSS-tyylit eivät myöskään ole vaikeita. Pääasiassa määritellyt marginaalit, pehmusteet ja värit.
Body,html ( font-family:Calibri, sans-serif; background:#eaf3fb; font-size:12px; height:1000px; line-height:18px; ) p (korkeus:30px; )
Valitsijat body, html käytetään vain esittelysivulle. Ja kaikki sisältö on sijoitettu kahteen vedettävään suorakulmioon.
Dv1 (leveys: 200px; taustaväri: #eff7ff; reuna: 1px kiinteä #96c2f1; sijainti: absoluuttinen; vasen: 100px; yläosa: 100px; ) .dv1 h2 ( taustaväri: #b2d3f5; täyte: 5px; font- perhe:Georgia, "Times New Roman", Times, serif; fontin koko: 1,0 em; tekstin muunnos: isot kirjaimet; fontin paino: lihavoitu; väri: #3a424a; marginaali: 1px; kohdistin: siirrä; ) .dv1 div ( täyte: 5px; margin-bottom: 10px; ) .dv2 ( taustaväri: #f6ebfb; reunus: 1px kiinteä #a36fde; leveys: 550px; sijainti: absoluuttinen; kohdistin: siirrä; vasen: 400px; yläosa: 230px; ) .dv2 h2 ( taustaväri: #eacfe9; kirjainväli: -0,09 em; fontin koko: 1,8 em; fontin paino: lihavoitu; täyte: 15 kuvapistettä; marginaali: 1 kuvapistettä; väri: #241f24; kohdistin: siirrä; ) .dv2 .content2 ( täyttö: 5 kuvapistettä; marginaali-ala: 10 kuvapistettä; )
Molemmissa luokissa .dv1 ja .dv2 käytämme absoluuttista paikannusta. Tämä ei ole välttämätöntä eikä luultavasti kaikkein tärkeintä Paras tapa vedettävien suorakulmioiden sijoittamiseen. Meidän esimerkissämme tämä sijoittelu on kuitenkin järkevä, koska joka kerta kun sivu päivitetään, suorakulmiot asennetaan tiettyihin paikkoihin.
Myös fontit ja värit ovat erilaisia suorakulmioissa, jotta eron huomaa helpommin.
Muuten lohkojen otsikot ja sisältö ovat lähes identtiset. Jos aiot kopioida tyylejä projektiisi, vaihda nimet ennen aloittamista. Joissakin tapauksissa on järkevämpää käyttää tunnuksia luokkien sijasta, esimerkiksi käytettäessä vedä ja pudota -tekniikkaa tietylle lohkolle.
Jäsennetään JavaScriptiäKaksi JavaScript-tiedostoa sisältävät kaiken sen toimimiseen tarvittavan koodin. Jätämme huomiotta jQueryn kanssa työskentelyn yksityiskohdat, koska tämä ei kuulu oppitunnin soveltamisalaan. Kiinnitetään huomiota jquery.dragndrop.js-tiedostoon.
Rivi 22 määrittelee Vedä-toiminnon.
$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex: 20, opasiteetti: .7, käsittelijä: null, onMove: function() ( ), onDrop: function() ( ) ), opts );
Tämä asettaa palautusmuuttujan ja alustustiedot kohteelle Vetää. Tätä menetelmää käytetään hyvin usein työskennellessäsi jQueryn kanssa vaihtoehtojen siirtämiseen muille toiminnoille. Sisäisesti asetamme muuttujat kaikille käytettävissä oleville vaihtoehdoille vedettäville suorakulmioille.
Seuraava koodi sisältää tapahtumakäsittelijät dragndrop-muuttujalle. Molemmat tapahtumat raahata Ja pudota kutsua toimintoja, jotka välittävät heille tapahtumaparametreja. Nämä tapahtumat tapahtuvat, kun vedät objektia hiiren painikkeella ja vapautat sen.
Muutt dragndrop = ( vedä: function(e) ( var dragData = e.data.dragData; dragData.target.css(( vasen: dragData.left + e.pageX - dragData.offLeft, ylhäällä: dragData.top + e.pageY - dragData.offTop )); dragData.handler.css(( kohdistin: "siirrä" )); dragData.target.css (( kohdistin: "move" )); dragData.onMove(e); ), pudota: function( e) ( var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(( "opasiteetti": "" )); dragData.handler.css("kursori", dragData. oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("hiiri", dragndrop.drop); ) )
Toimintomme manipuloivat kunkin objektin CSS-paikannusta. Objektien absoluuttisen sijainnin muuttaminen ei vaikuta koodisi toimintaan, koska jokainen JavaScript-funktio muuttaa objektille määritettyä tyyliä.
Loput koodista tarkistaa käsittelijän ja tekee kosmeettisia muutoksia muihin tyyleihin. Täällä voit lisätä muutoksia läpinäkyvyyteen, fonttiin ja fontin väriin tai lisätä uusia kappaleita.
Vedä/pudota-toiminnotToinen fn.js-tiedosto sisältää hyvin yksinkertaisen koodin. Me odotamme täyslasti asiakirja, jonka jälkeen kutsumme funktioitamme. Funktiosta on määritelty kaksi esiintymää Vetää, josta keskusteltiin aiemmin.
Meillä on kaksi siirrettävää lohkoa luokilla .dv1 ja .dv2 . Jos sinun on jätettävä yksi siirrettävä lohko, sinun on vain poistettava koodin toinen osa. Toisen siirrettävän lohkon lisääminen on myös helppoa. Sinun tarvitsee vain lisätä uusi toiminto tähän tiedostoon.
Ensimmäinen vaihe on asetusten asettaminen toimintoa kutsuttaessa. Muista asettaa käsittelijän nimi. Sen avulla kerromme jQuerylle, mitä käsittelijää käytetään, kun hiiren painiketta painetaan asiakirjan tietyllä alueella. Käsittelijän nimi voi olla luokka tai ID-attribuutti.
Ensimmäisessä toiminnossamme on kaksi tapahtumakäsittelijää onMove ja onDrop. Molemmat kutsuvat uusia toimintoja, jotka välitetään nykyiseen tapahtumaan muuttujina. Tässä suorakulmion HTML-koodia muokataan päivittämään jokaisen liikkeen yhteydessä. Tämä on loistava vaikutus havainnollistamaan, kuinka voit hallita prosessia yksinkertaisten jQuery-tapahtumien avulla.
Toisessa funktiossa käytämme z-indeksi- ja opasiteettiparametreja. Voitko lisätä muita CSS-ominaisuuksia? mutta tämä edellyttää JavaScript-koodin muokkaamista, jotta asetukset tarkistetaan. Voit esimerkiksi välittää eri fonttityylin tai arvot liikkuvan suorakulmion korkeudelle ja leveydelle - erittäin mielenkiintoinen temppu!
JohtopäätösPienellä työllä meillä on nyt käytössämme loistava vedä ja pudota -käyttöliittymä. jQuery tarjoaa valtavia etuja kehittäjille, jotka haluavat käyttää vanhoja menetelmiä projekteissaan.
Tämän seurauksena meillä ei ole vain tapahtumakäsittelijätoimintoja, vaan voimme myös siirtää uusia muuttujia vedettäville lohkoille. Tämä avaa uusia mahdollisuuksia luovuudelle. Oppitunnin esittely sisältää vain luonnoksen siitä, mitä tällaisella koodilla voidaan tehdä.
Joten tutustu jQuery-dokumentaatioon käyttääksesi kirjaston toimintoja.
VCL-kirjastoon Borland on ottanut käyttöön oman versionsa Drag&Drop-liittymästä (käännettynä "vedä ja pudota"). Tämä käyttöliittymä on sisäinen - voit lähettää ja vastaanottaa mitä tahansa Delphi-ohjausobjektia lomakkeen sisällä (paitsi itse lomake).Se on toteutettu ilman vastaavia Windows API -toimintoja - niitä tulee käyttää kommunikoitaessa muiden tehtävien kanssa vetämällä ja pudottamalla.
Napsauta hiiren vasenta painiketta ohjausobjektin päällä, voimme "raahaa" sen mihin tahansa muuhun elementtiin. Ohjelmoijan näkökulmasta tämä tarkoittaa sitä, että avaimen vetämisen ja vapauttamisen hetkinä syntyy tiettyjä tapahtumia, jotka välittävät kaiken tarvittavan tiedon - osoittimen vedetylle objektille, kursorin nykyiset koordinaatit jne. Vastaanottaja tapahtumista on elementti, jolla kohdistin tällä hetkellä sijaitsee. Tällaisen tapahtuman käsittelijän on kerrottava järjestelmälle, vastaanottaako ohjaus lähetyksen vai ei. Kun vastaanottosäätimen yläpuolella oleva painike vapautetaan, syntyy vielä yksi tai kaksi tapahtumaa, riippuen vastaanottimen valmiudesta.
CancelDrag Peruuttaa nykyisen vedä ja pudota tai vedä ja kiinnitä -toiminnon.
Funktio FindDragTarget (const Pos: TPoint ; AllowDisabled: Boolean ): TControl ;
Funktio palauttaa perusluokan TControl objektin, joka viittaa näytön sijaintiin Pos-parametrilla määritellyillä koordinaatteilla. Tätä toimintoa käytetään määrittämään vedä ja pudota tai vedä ja laita -operaation mahdollinen vastaanottaja. Jos määritetylle paikalle ei ole ikkunaohjausta, funktio palauttaa arvon nolla. AllowDisabled-parametri määrittää, otetaanko käytöstä poistetut objektit huomioon.
Funktio IsDragObject(Lähettäjä: TObject): Boolen;
Funktio määrittää, onko Lähettäjä-parametrissa määritetty objekti TDragObject-luokan jälkeläinen. Tätä toimintoa voidaan käyttää lähdeparametrina OnDragOver- ja OnDockOver-tapahtumakäsittelijöissä sen määrittämiseksi, hyväksytäänkö vedetty objekti. IsDragObject-funktiota voidaan käyttää myös Source-parametrina OnDragDrop- ja OnDockDrop-tapahtumakäsittelijöissä vedetyn objektin tulkitsemiseksi oikein.
Ominaisuudet DragMode, DragCursor, menetelmät BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, Hyväksy parametri
Tietojen raahaaminen objektista toiseen hiiren avulla on laajalti käytössä Windowsissa. Voit siirtää tiedostoja kansioiden välillä, siirtää itse kansioita jne.
Kaikki vedä ja pudota -prosessiin liittyvät ominaisuudet, menetelmät ja tapahtumat määritellään TControl-luokassa, joka on kaikkien Delphin visuaalisten komponenttien esikuva. Siksi ne ovat yhteisiä kaikille komponenteille.
Vetämisen aloitus määräytyy DragMode-ominaisuuden perusteella, joka voidaan asettaa suunnitteluhetkellä tai ohjelmoidusti samaksi kuin dmManual tai dmAutomatic. dmAutomatic-arvo määrittää, alkaako vetäminen automaattisesti, kun käyttäjä painaa hiiren painiketta komponentin päällä. Tässä tapauksessa hiiren painikkeen napsautukseen liittyvää OnMouseDown-tapahtumaa ei kuitenkaan esiinny ollenkaan tälle komponentille.
Käyttöliittymä komponenttien siirtämiseen ja vastaanottamiseen ilmestyi melko kauan sitten. Se mahdollistaa kahden säätimen vuorovaikutuksen sovelluksen ollessa käynnissä. Tässä tapauksessa kaikki tarvittavat toimenpiteet voidaan suorittaa. Käyttöönoton helppoudesta ja pitkäaikaisesta kehityksestä huolimatta monet ohjelmoijat (etenkin aloittelijat) pitävät tätä mekanismia epäselvänä ja eksoottisena. Vedä ja pudota -käyttö voi kuitenkin olla erittäin hyödyllistä ja helppokäyttöistä. Nyt varmistamme tämän.
Jotta mekanismi toimisi, kaksi säädintä on konfiguroitava vastaavasti. Yhden pitäisi olla lähde (Source), toisen pitäisi olla vastaanotin (Target). Tässä tapauksessa lähde ei liiku minnekään, vaan se vain rekisteröidään sellaisenaan mekanismiin.
Uskokaa minua, riittää yksinkertaisesti muuttamaan OnDragOver- ja OnDragDrop -tapahtumien parametreissa välitetyt X,Y-koordinaatit lomakekoordinaateiksi.
Työskentele sen komponentin Vasen- ja Top-ominaisuuksilla, joiden yli kohdistin liikkuu. Annan sinulle yksinkertaisen esimerkin. Aseta muistio-komponentti lomakkeeseen ja aseta Align-ominaisuuden arvoksi alTop. Aseta paneeli lomakkeeseen, aseta myös Align-ominaisuuden arvoksi alTop ja aseta Korkeus-ominaisuuden arvoksi pieni arvo, esimerkiksi 6 tai 7 pikseliä. Aseta DragMode arvoon dmAutomatica ja DragCursor arvoon crVSplit. Aseta toinen Memo-komponentti ja aseta Align to alClient. Valitse samanaikaisesti molemmat Memo-komponentit, paneeli ja luo yhteinen OnDragOver-tapahtumakäsittelijä alla olevan kuvan mukaisesti:
Äskettäin minulla oli idea aloittaa pelin kehittäminen Androidille. Aluksi päätin kirjoittaa shakkia. Minusta tuntui, että Drag and Drop -tekniikka sopisi täydellisesti hahmojen liikuttelumekanismin toteuttamiseen. Asiattomille huomautan, että vedä ja pudota -menetelmä on kyky vetää yksi graafinen objekti toiseen ja suorittaa yksi tai toinen toiminto sen vapauttamisen jälkeen. Yksinkertaisin esimerkki on pikakuvakkeen poistaminen tietokoneen työpöydältä vetämällä se roskakoriin. "Heitämällä" etiketin roskakoriin, kerromme järjestelmälle, että haluamme pakottaa nämä kaksi kohdetta vuorovaikutukseen. Järjestelmä vastaanottaa signaalimme ja päättää, mitä sen pitäisi tehdä. Vedä ja pudota on yleistynyt sen intuitiivisen selkeyden ansiosta. Tätä lähestymistapaa tukee kokemuksemme vuorovaikutuksesta todellisten objektien kanssa, ja se toimii erinomaisesti virtuaaliympäristössä. Shakissa vedä ja pudota -toiminnolla on teknisesti helpompi määrittää solu, johon käyttäjä veti nappulan, koska solunumeroa ei tarvitse laskea vapautuspisteen koordinaateista. Tämän työn ottaa hoitaakseen virtuaalikone.
Vedä ja pudota -tekniikan avulla voin ratkaista kolme ongelmaa pienellä vaivalla:
Tehtävät on hahmoteltu, aloitetaan niiden toteuttaminen.
ImageView-korvaus koskettamallaKaikki muodoni ovat ImageView-objekteja. Valitettavasti kävi ilmi, että Drag & Drop -toteutus Androidissa ei salli "suoraan laatikosta" korvata kohteen kuvaa, kun sitä kosketetaan. Tämä tehtävä voidaan kuitenkin ratkaista kokonaan API:lla. Meidän on suoritettava useita yksinkertaisia vaiheita:
Nämä toiminnot on toteutettava ImageView-objektin OnTouchListner-käsittelijässä. Tehdään tämä ohittamalla onTouch-menetelmä:
@ Ohita julkinen boolean onTouch(Näytä näkymä, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder.Builder=uusi dsbsbilder (view) ; view. startDrag(clipData, dsb, view, 0 ) ; view. setVisibility(View. INVISIBLE) ; return true ; ) else ( return false ; ) )Kaikki on hyvin yksinkertaista. Joten, olemme selvittäneet kuvan korvaamisen, siirrytään seuraavaan tehtävään.
Vedä-pudotustoiminnon vetämisalueen rajoittaminenVetoalueen rajoittamisessa on ongelma. Asia on siinä, että jos vapautat palan laudan ulkopuolelle, pudotustapahtumaa ei tapahdu, koska käyttäjä vapautti objektin tyhjässä tilassa, eikä objektilla ole mitään vuorovaikutusta. Tämän seurauksena hahmo ei palaa alkuperäiseen tilaansa ja pysyy piilossa ikuisesti. Vietin paljon aikaa dokumenttien lukemiseen, mutta en silti löytänyt tapaa rajoittaa objektien vedä ja pudota -aluetta. Havainto tuli yllättäen. Minun ei tarvitse rajoittaa aluetta ollenkaan, minun on tiedettävä, onko käyttäjä vapauttanut muodon oikein vai ei.
Oikean vapautumisen määrittäminen
Löysin vastaukset kysymyksiini Android Developers -sivuston "handling drag end -tapahtumien käsittely" -osiosta. Tässä on muutamia keskeisiä kohtia:
Joten minun on siepattava ACTION_DRAG_ENDED-tapahtuma ja kutsuttava getResult-menetelmä. Jos se palauttaa epätosi, käyttäjä on vetänyt palan pois taululta ja minun on asetettava ImageView näkyvään tilaan.
@ Ohita julkinen boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; Näytä dragView= (View) 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= (dragAction) else ; = DragEvent. ACTION_DROP& amp;& amp; sisältääVedämisen) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ) yksityinen boolean dropEventNotHandled(DragEvent! ) ;)Nyt käyttäjä voi vapauttaa hahmon missä tahansa, eikä mitään pahaa tapahdu.
Kelvollisten liikkeiden määritelmäArtikkelin viimeinen osa on omistettu käyttäjän tekemän liikkeen oikeellisuuden tarkistamiseen. Ennen kuin käsittelen tätä aihetta yksityiskohtaisesti, teen lyhyen muistiinpanon, jossa selitän hakemukseni rakenteen. Shakkilauta esitetään TableLayout-muodossa, ja jokainen solu on LinearLayoutin ali, ja siinä on OnDragListener.
Lisäksi jokainen OnDragListener viittaa "mediator"-olioon, joka huolehtii peliobjektien vuorovaikutuksesta ja muistaa nykyisen solun sijainnin.
Kun käyttäjä vetää palan solun yli, seuraavat toimet ovat mahdollisia:
Alla on koodi, joka toteuttaa kuvatun logiikan
@ Ohita julkinen boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; Näytä dragView= (View) 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= (dragAction) else ; = DragEvent.ACTION_DROP& amp;& amp; sisältääDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; )Kuten näette, riippumatta siitä, onko siirto kelvollinen vai ei, ImageView siirretään näkyvään tilaan. Halusin käyttäjän näkevän muodon liikkuvan. Mainitsin aiemmin, että solu on LayoutView'n ali. Tämä tehdään ImageView:n siirtämisen helpottamiseksi solusta toiseen. Alla on koodi checkForValidMove-menetelmälle, joka näyttää kuinka ImageView liikkuu.
yksityinen void checkForValidMove(ChessBoardSquareLayoutView View, View dragView) ( if (mediator. isValidMove(view) ) ( ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; view. setGravity (Gravity. CENTER) ; view. showAsLanded() ; välittäjä. handleMove(view) ; ) )Toivon, että tämä artikkeli auttaa sinua kehittäessäsi omia projektejasi.
