Yksinkertaisen HTML5-vedä ja pudota -käyttöliittymän luominen. Vedä ja pudota: tapa käyttää käyttöliittymäelementtejä 13 vedä ja pudota -tekniikka

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äminen

Vedettäville vuorovaikutuksille on monia mukautusvaihtoehtoja. Tärkeimmät ominaisuudet, joita käsitellään seuraavissa osioissa, on esitetty alla olevassa taulukossa:

Vedettävät vuorovaikutusominaisuudet Kiinteistön kuvaus

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

Liikesuuntien rajoittaminen

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:

Rajoita elementin liikkumisaluetta

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:

Rajoittaa kykyä siirtää elementti ruudukon soluihin

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 viive

On 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äminen

Kaikki 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äminen

Interaction 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äminen

Elementin 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:

Pudotettavat vuorovaikutustapahtumat Tapahtuman kuvaus

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 valaistus

Aktivointi- 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 alkuperäiseen tilaan 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:

Päällekkäisten elementtien käsittely

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äminen

Pudotettavalla vuorovaikutuksella on useita ominaisuuksia, joita voit muokata sen käyttäytymisen muokkaamiseksi. Nämä ominaisuudet on lueteltu alla olevassa taulukossa:

Pudotettavat vuorovaikutusominaisuudet Kiinteistön kuvaus

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

Siirrettävien elementtien rajoittaminen

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 siirrettävää elementtiä, ja valinta id-attribuutin mukaan ei anna haluttu lopputulos, koska teksti tässä tapauksessa muuttuu aina samassa kelluvassa elementissä riippumatta siitä, mikä niistä 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 muuttaminen

Oletusarvoisesti 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:

Kiinnitä elementin reunoihin

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.

Vedä ja pudota -tekniikat ovat kehittyneet vuosien aikana. Ei ole yllätys, että avoimen lähdekoodin laajennuksia kehittävien ohjelmoijien lisääntyessä lähdekoodi(esimerkiksi jQuerylle) vanhat menetelmät heräävät uudelleen 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.

Sisällön valmistelu

Ensinnäkin valmistetaan pieni verkkosivusto projektia varten. Projektikansioon sinun on luotava kaksi hakemistoa merkittävillä nimillä "js" ja "css" ja tyhjä tiedosto index.html. Koodi tulee olemaan hyvin yksinkertainen, jotta työstä on selkeä käsitys ja jatkokehityksessä on aihetta.

Alla on meidän koodi HTML-tiedosto. 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.

CSS:n asennus

HTML-koodi on hyvin yksinkertainen. Jos ymmärrät perusmerkinnät, niin CSS-tyylejä ei myöskään aiheuta vaikeuksia. 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äyte: 5px; margin-bottom:10px; )

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 muuttujia kaikille Käytettävissä olevat vaihtoehdot 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-toiminnot

Toinen fn.js-tiedosto sisältää hyvin yksinkertaisen koodin. Odotamme, kunnes asiakirja on ladattu kokonaan, minkä jälkeen kutsumme toimintojamme. 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 ominaisuus tässä tiedostossa.

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ös

Pienellä 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.

On helpompi ottaa jotain ja laittaa se alas kuin kirjoittaa, mitä pitää ottaa ja mihin laittaa. Tietenkään ilman hiirtä tai vastaavaa laitetta ei voi valita tai määrittää mitään, mutta nykyisessäkin tilanteessa "vedä ja pudota" -idean käyttäminen on erittäin luonnollista ja mukavaa.

Idean laajuus ei ole kaukana vain verkkokaupoista, sähköisistä kirjastoista, hakukoneista tai Tietojärjestelmä, ja myös sovelletun sfäärin. Ajatus soveltuu hyvin vuorovaikutteisesti luotujen ja ylläpidettyjen verkkosivustojen ja niiden elementtien kehittämiseen ilman ohjelmoijan osallistumista.

Kuvaus ideasta

Valitse, siirrä ja aseta - idea on luonnollinen ja kätevä. On yksinkertaisesti yllättävää, että se ei syntynyt, kun hiirestä tuli välttämätön tietokoneen lisävaruste.

Ilmeisin esimerkki on tuotteen valitseminen verkkokaupasta. Halutun tuotteen ottaminen hiirellä ja vetäminen ostoskoriin on yksinkertaista, luonnollista ja kätevää. Tiedostojen lataaminen: Asiakirjan vieminen selainikkunan ulkopuolelle ja sijoittaminen sivuelementtiin, jolloin asiakirja siirtyy palvelimelle, on myös käytännöllinen idea.

Kehittäjälle "vedä ja pudota" -ajatuksena on manipuloida sivuelementtejä laskematta manuaalisesti uudelleen tunnisteiden koordinaatteja ja kokoja, mahdollisuus valita useita elementtejä ja kohdistaa ne sekä siirtää lohkotunnisteiden sivuja.

HTML ja CSS ovat erinomaisia ​​kieliä tagien kuvaamiseen ja muotoiluun, mutta kun kehittäjällä on kyky käsitellä sivuelementtejä interaktiivisesti ilman manuaalista koordinaattien ja koon uudelleenlaskentaa, tämä tekee työstä mukavampaa ja tehokkaampaa.

Helppo tiedostojen siirto

"Vedä ja pudota": käännös englannista venäjäksi kuulostaa kirjaimellisesti "vedä ja pudota". Käytännössä se kuulostaa ja toimii paremmin: valittu, siirretty ja vapautettu - yksinkertainen ja luonnollinen.

Tiedoston siirto sivulla sivulle, palvelimelle tai muuhun käyttöön on hyvin yksinkertaista.

Tässä esimerkissä useita tiedostoja työpöydältä valittiin hiirellä (vasen kuva). Valinnassa painettiin hiiren vasenta painiketta ja valittu “meni” koriin. Selain itse osoitti kuinka tämä tapahtuu, kirjoitti vihjeen "kopioimisesta" ja loi ääriviivat sen ympärille siirretyistä tiedostoista.

Kun hiiri oli korin päällä, kävijä vapautti hiiren vasemman painikkeen, "vedä ja pudota" -tapahtuma tapahtui ja sivuston sivulla (alakuvassa) JavaScript-koodi pystyi vastaanottamaan ja käsittelemään kaikki vierailijan toimittamat tiedostot. sivulle (sivustolle).

Toteutuskuvaus

Tämän toimenpiteen suorittava koodi on hyvin yksinkertainen. Jopa aloitteleva kehittäjä voi toistaa sen kaikissa käyttötapauksissa.

Tässä käyttöliittymää edustaa kaksi tunnistetta: scPlaceFile (tämä on itse kori, johon sinun on laitettava tiedostoja) ja scPlaceFiles (tämä on tiedostojen käsittelyn tulos, tässä tapauksessa luettelo niistä).

Sivun logiikka on seuraava. Kun sivu ladataan selaimeen, "ondrop" -tapahtumakäsittelijä määrätään koriin - put, muut tapahtumat estetään eikä niitä käytetä.

Sivu toimii normaalisti, mutta heti kun vierailija valitsee tiedoston (tiedostot) ja vetää ne ostoskoriin, eli scPlaceFile-tunnisteeseen, "tiedostot ovat saapuneet" -tapahtuman käsittely käynnistyy.

Tämä käsittelijä näyttää vain tiedostoluettelon. Niiden numero on event.dataTransfer.files.length, ja kunkin tiedoston tiedot ovat event.dataTransfer.files[i].name. Kehittäjä päättää, mitä vastaanotetuille tiedoille tehdään; tässä tapauksessa vastaanotettujen tiedostojen luettelo luodaan yksinkertaisesti.

Käsittelyn jälkeen tapahtuma estetään, eikä sitä levitetä. Tämä on välttämätöntä, jotta selain ei osallistu amatööritoimintaan eikä häiritse vastaanotettujen tietojen käsittelyä.

DnD ja ulkoiset tiedot

Kuvien lataaminen palvelimelle vetämällä ja pudottamalla on yleinen käytäntö tämän tekniikan käytössä. Yleensä kehittäjä luo tiedoston latauslomakkeen (1), joka toimii normaalisti (2). Vierailija voi valita tiedostoja ja ladata ne tavalliseen tapaan.

Jos vierailija kuitenkin vetää ja pudottaa tietyn paikan lomakkeella, tiedoston (tiedostojen) nimikenttä täytetään automaattisesti.

Tämä hyvä päätös. On tietysti erittäin vaikeaa myöntää, että tietokoneessa ei ole hiirtä. Mutta on parempi kehittää käyttöliittymä tavallisessa versiossa ja DnD-toteutuksessa.

DnD ja sisäiset tiedot

Vierailijan eduista huolehtiminen on aina tärkeää, mutta myös kehittäjän huolenaiheet ovat tärkeitä. Voit toteuttaa "vedä ja pudota" paitsi standardi tarkoittaa, mutta myös käsittelemällä hiiren tapahtumia sivuelementeissä.

Tehtävä tunnisteen koordinaattiarvojen ja niiden koon laskemiseen nousee jatkuvasti esiin. Manuaalinen laskenta on hyvä käytäntö, mutta interaktiivinen vaihtoehto on kätevämpi. Kaikki tunnisteet ovat aina suorakaiteen muotoisia, ja seuraamalla "hiiri"-tapahtumia elementtien sivuilla voit luoda mahdollisuuden siirtää elementtejä automaattisesti haluttuun paikkaan sivulla tai muuttaa niitä.

Hiiren napsautustapahtuman käsittely - napsautuspaikan koordinaattien muistaminen, esimerkiksi elementin toinen puoli. Hiiren liikuttaminen - sivu liikkuu haluttuun suuntaan. Hiiren painikkeen vapauttaminen - sivu pysähtyy ja sen koordinaatit muuttuvat. Tällä tavalla voit muuttaa elementin sijaintia tai sen kokoa.

Muodollisesti tämä ei ole "vedä ja pudota", mutta vaikutus on samanlainen ja käytännöllinen. Tekemällä yleiskäsittelijät mille tahansa sivuelementille saat hyvän interaktiivisen tuloksen, nopeuttaa kehitystä ja yksinkertaistaa koodia.

Visuaalinen ja manuaalinen ohjelmointi

Hiiri tietokoneessa ja sormet älypuhelimessa - ehdottomasti erilaisia ​​lähestymistapoja käyttöliittymän toteutukseen (vierailija, kehittäjä). Vaatimus selainten välisestä yhteensopivuudesta on varsin luonnollinen ja moderni.

Kaikki tämä yhdessä vaikeuttaa sivujen luomista, mutta soveltamalla "vedä ja pudota" -ideaa sen vakiomuodossa, käyttämällä sen tapahtumia, yhdistämällä tämä idea tavallisiin elementteihin liittyviin tapahtumiin, on mahdollista toteuttaa mekanismi mikä sivun luominen tapahtuu visuaalisesti.

Katsotaanpa nyt elementin tai elementtien valintaa. Valinnan tosiasia on kontekstivalikon ulkoasu, esimerkiksi tavoitteena on kohdistaa valitut (vasen, oikea, keskelle) tai jakaa elementit pysty- tai vaakasuunnassa samalla askeleella tai muuttaa niiden kokoa (minimi, maksimi) .

Koordinaattien ja mittojen automaattinen uudelleenlaskenta on parempi kuin manuaalinen uudelleenlaskenta. Vähemmän virheitä tarkoittaa, että tavoite saavutetaan nopeammin. Lisäksi voit luoda sivun yhdessä selaimessa ja tallentaa elementtien sijainnin ja koon. Avaamalla tämän sivun älypuhelimellasi voit korjata koordinaatit ja mitat ja muistaa ne tietylle älypuhelinmallille tai selainversiolle.

Joten samalla sivulla ilman eri selaimien vaatimusta manuaalisesti näytetään eri tiedot erilaisia ​​laitteita ja eri selaimissa.

Antamalla vierailijan suorittaa nämä toimenpiteet itsenäisesti ja myös valita tarvittavat sivuelementit kehittäjän toimittamista osista, on mahdollista varmistaa selainyhteensopivuus ja sivun vaadittu toiminnallisuus käyttäjän mielipide huomioon ottaen.

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ä.