JavaScriptin vedä ja pudota

Yhteenveto: Tässä opetusohjelmassa opit JavaScriptin vedä ja pudota -sovellusliittymästä.

Johdanto JavaScript-vedä ja pudota -sovellusliittymään

HTML5 otti virallisesti käyttöön vedä ja pudota -määrityksen. Useimmissa nykyaikaisissa selaimissa on otettu käyttöön natiivi vetäminen ja pudottaminen HTML5-määritysten perusteella.

Oletuksena vain kuva ja teksti voidaan vetää. Vedä kuvaa pitämällä hiiren painiketta alhaalla ja siirtämällä sitä sitten. Vedä tekstiä korostamalla tekstiä ja vetämällä se samalla tavalla kuin vedät kuvaa.

HTML5-määrittely määrittää, että melkein kaikki elementit voidaan vetää. Jos haluat tehdä elementistä vedettävän, lisää draggable -ominaisuus arvon true HTML-tagiin. Esimerkiksi:

Code language: HTML, XML (xml)

vetettävien elementtien tapahtumat

Kun vedät elementtiä, nämä tapahtumat käynnistyvät seuraavassa järjestyksessä:

• dragstart
• drag
• dragend

Kun pidät hiiren painiketta painettuna ja aloitat hiiren liikuttamista, dragstart -tapahtuma käynnistää vedettävän elementin että vedät. Kohdistin muuttuu pudottamattomaksi symboliksi (ympyrä, jonka läpi kulkee viiva) osoittaakseen, että et voi pudottaa elementtiä itselleen.

dragstart jälkeen tapahtuma käynnistyy, drag -tapahtuma käynnistyy toistuvasti, kun elementtiä vedetään.

Ja dragend -tapahtuma käynnistyy kun lopetat elementin vetämisen.

Kaikkien tapahtumien kohde (e.target) on elementti, jota vedetään.

Oletuksena , selain ei muuta vedetyn elementin ulkonäköä. Siksi voit mukauttaa sen ulkoasua mieltymystesi mukaan.

Tapahtumat pudotuskohteissa

Kun vedät elementin kelvollisen pudotuskohteen päälle, nämä tapahtumat käynnistyvät seuraavassa järjestyksessä:

• dragenter
• dragover
• dragleave tai drop

dragenter -tapahtuma käynnistyy heti kun vedät elementti pudotuskohteen päälle.

dragenter -tapahtuman käynnistymisen jälkeen dragover -tapahtuma käynnistyy toistuvasti niin kauan kuin vedät elementtiä pudotuskohteen rajoissa.

Kun vedät elementin pudotuskohteen rajan ulkopuolelle, dragover tapahtuma lopettaa laukaisun ja dragleave -tapahtuma käynnistyy.

Jos pudotat elementin kohteeseen, drop tapahtuma käynnistyy tapahtuman dragleave sijaan.

Kohde ( ) dragenter, dragover, dragleave – ja drop -tapahtumat ovat pudotuskohteen elementtejä.

Kelvollinen pudotuskohde

Lähes kaikki elementit tukevat pudotuskohteen tapahtumia (dragenter, dragover, dragleave ja drop). Ne eivät kuitenkaan salli pudottamista oletusarvoisesti.

Jos pudotat elementin pudotuskohteen päälle, joka ei salli pudotusta, drop -tapahtuma voitti ei tule.

Jos haluat muuttaa elementin kelvolliseksi pudotuskohteeksi, voit ohittaa sekä dragenter että dragover tapahtumia kutsumalla event.preventDefault() -menetelmä vastaavissa tapahtumankäsittelijöissään. (Katso lisätietoja esimerkkiosasta.)

Tietojen siirtäminen dataTransfer-objektin avulla

Jos haluat siirtää tietoja vedä ja pudota -toiminnossa, käytä dataTransfer objekti.

dataTransfer -objekti on tapahtuman ominaisuus. Sen avulla voit siirtää tietoja vedetystä elementistä pudotuskohteeseen.

Objektilla dataTransfer on kaksi tapaa: setData() ja getData().

setData() avulla voit asettaa vetotoiminnon tiedot määritettyyn muotoon ja tietoihin :

Code language: CSS (css)

Muoto voi olla text/plain tai text/uri-list. Ja data voi olla merkkijono, joka edustaa vedettävälle objektille lisättäviä tietoja.

Metodi getData() hakee -menetelmä.

getData() hyväksyy yhden argumentin:

Muoto voi olla text/plain tai text/uri-list. getData() palauttaa setData() -menetelmällä tallennetun merkkijonon tai tyhjän merkkijonon, jos vetotoiminto ei sisällä tietoja.

JavaScript-vedä ja pudota -esimerkki

Kehitämme seuraavan yksinkertaisen vedä ja pudota -sovelluksen osoittamaan JavaScriptin vedä ja pudota -sovellusliittymää:

Luo projektin rakenne

Luo ensin uusi kansio nimeltä drag-n-drop-basics. Luo tämän kansion sisälle kaksi alikansiota nimeltä css ja js.

Luo sitten uusi tiedosto nimeltä app.js js -kansiossa, style.css css -kansio ja index.html drag-n-drop-basics -kansioon.

Sijoita kolmanneksi linkki style.css ja komentotunniste, joka linkittää app.js -tiedostoon index.html -tiedostossa näin:

Luo index.html-tiedosto

Sijoita seuraava koodi index.html -tiedostoon:

Tässä index.html-tiedostossa käytimme .container -elementtiä kohdistamaan otsikko ja drop-targets -elementti.

drop-target-elementin sisällä sijoitti kolme div -elementtiä samalla luokalla box. Ja sijoitamme toisen div-elementin, jonka luokka on item, ensimmäiseen ruutuun.

Jos avaat index.html ja yritä vetää keltaista ruutua, näet kohdistimen, joka osoittaa, että et voi vetää:

Jotta elementti vedettäisiin, lisää ominaisuus draggable, jonka arvo on true HTML-tagiinsa seuraavasti:

Code language: JavaScript (javascript)

Jos nyt tallennat index.html, avaa se selaimessa taas näet, että voit vetää alkioelementin näin:

Käsittele vedettävän elementin tapahtumia

style.css -tiedostolla on .hide luokka, joka piilottaa elementin:

Code language: CSS (css)

app.js -tiedostoon lisätään seuraava koodi:

Kuinka minä toimii:

• Valitse ensin vedettävä elementti querySelector() -toiminnolla.
• Liitä sitten dragstart tapahtumakäsittelijä vedettävään elementtiin.
• Kolmanneksi määritä dragStart() -toiminto käsittelemään dragstart tapahtuma.

Jos avaat index.html-tiedoston ja aloitat vedettävän elementin vetämistä, näet drag starts... -viestin konsoli.

dragStart -tapahtumakäsittelijässä sinun on tallennettava vedettävän elementin id. Ja sinun on piilotettava se:

Jos vedät elementtiä, huomaat, että se katoaa, kun aloitat vetämisen.

Voit ratkaista tämän käyttämällä setTimeout() -toiminto:

Nyt voit vetää vedettävän elementin alkuperäisestä sijainnistaan:

Käsittele pudotuskohteiden tapahtumia

Style.css-tiedostossa on myös CSS-luokka nimeltä .drag-over, joka muuttaa pudotuskohteen reunatyylin katkoviivaiseksi ja punaiseksi:

Code language: CSS (css)

App.js: ssä tarvitset valitaksesi pudotuskohde-elementit ja käsittelemään dragenter, dragover, dragleave ja drop Näiden elementtien tapahtumat:

Pudotuskohteen reunatyylin tulisi muuttua, kun dragenter ja dragover -tapahtuma tapahtuu. Sen pitäisi palauttaa tyyli, kun dragleave – ja drop -tapahtuma esiintyy.

Voit tehdä sen lisäämällä ja poistamalla drag-over -luokka drop -kohteeseen näin:

Jos vedät vedettävän elementin toiseen pudotukseen kohde, huomaat, että pudotuskohteen raja muuttuu seuraavan kuvan mukaisesti:

Jotta pudotuskohde olisi kelvollinen, sinun on soitettava event.preventDefault() kohdassa dragenter ja dragover tapahtumankäsittelijät, kuten tämä:

Jos et tee tätä, tapahtuma drop ei koskaan käynnistä, koska div -elementti ei ole oletusarvoisesti kelvollinen pudotuskohde.

Jos vedät vedettävän elementin pudotuskohteeseen, näet, että kohdistin muutokset osoittavat, että voit pudottaa elementin:

Jos pudotat alkioelementin, näet, että se katoaa välittömästi.

Tämän ratkaisemiseksi ongelma, sinun on lisättävä tapahtuma drop.

• Hanki ensin vedettävän elementin id käyttämällä iv id = getData() -menetelmää = ”cafe64ce48”> objekti.
• Liitä sitten vedettävä elementti pudotuskohde-elementin lapsielementtinä.
• Kolmanneksi poista hide -luokka draggable -elementistä.

Seuraava koodi näyttää täydellisen drop tapahtumakäsittelijä:

Jos vedät ja pudotat vedettävää elementtiä nyt, sen pitäisi toimia odotetulla tavalla.

Seuraava näyttää koko app.js-tiedoston:

Ja tässä on linkki esittelyyn.

Yhteenveto

• Lisää ominaisuus draggable arvon true elementtiin, jotta se olisi vedettävissä.
• dragstart, drag ja dragend -tapahtumat käynnistyvät vedettävässä elementissä.
• dragenter, dragover, tai drop tapahtumat alkavat pudotuskohteessa.
• Kutsu event.preventDefault() dragenter ja dragover tapahtumankäsittelijät tekevät elementistä kelvollisen pudotuskohteen.
• Käytä event.dataTransfer objekti setData() – ja getData() -menetelmillä tietojen siirtämiseksi vedä ja pudota -operaatiossa.