Vedä ja pudota -elementtien luominen vaniljan JavaScriptiä ja HTML-koodia käyttämällä

Johdanto

Vedä ja pudota -asetus on yleinen käyttäjän vuorovaikutus, jonka löydät monista graafisista käyttöliittymistä.

Vedä ja pudota -ominaisuuden lisäämiseen sovellukseesi on olemassa jo olemassa olevia JavaScript-kirjastoja. Saattaa kuitenkin olla tilanteita, joissa kirjastoa ei ole saatavana tai se tuo yleiskustannuksia tai riippuvuutta, jota projektisi ei tarvitse. Näissä tilanteissa nykyisten selainten käytettävissä olevien sovellusliittymien tuntemus voi tarjota vaihtoehtoisia ratkaisuja.

HTML Drag and Drop -sovellusliittymä perustuu DOM: n tapahtumamalliin saadakseen tietoja siitä, mitä vedetään tai pudotetaan. päivittää kyseisen elementin vetämällä tai pudottamalla. JavaScript-tapahtumakäsittelijöiden avulla voit muuttaa minkä tahansa elementin vedettäväksi tai pudotettavaksi kohteeksi.

Tässä opetusohjelmassa rakennamme vedä ja pudota -esimerkin HTML Drag and Drop -sovelluksella. Sovellusliittymä, jossa on vanilja JavaScriptiä tapahtumakäsittelijöiden käyttämiseen.

Edellytykset

Tämän opetusohjelman suorittamiseen tarvitaan:

• moderni selain, joka tukee vedä ja pudota -sovellusliittymä (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

Vaihe 1 – Projektin ja alkumerkintöjen luominen

Projektimme koostuu kontista, jossa on kahden tyyppisiä alielementtejä:

• Lapsielementit, joita voit vetää
• Lapsielementit, joihin voi pudota elementtejä

Avaa ensin pääteikkuna ja luo uusi projektihakemisto:

Siirry seuraavaksi hakemistoon:

Luo sitten index.html tiedosto hakemistoon:

Lisää seuraavaksi kattilakoodi HTML-verkkosivulle:

Ja -tagit lisäävät draggable -kohteen ja dropzone (pudota kohde):

Tallenna ja sulje tiedosto. Luo sitten style.css -tiedosto:

Lisää seuraavaksi tyylejä index.html -tiedosto:

Tämä lisää muotoilua sovellukseen. Nyt voit tarkastella index.html selaimessa ja havaita, että tämä tuottaa draggable <div> ja a dropzone <div>.

Seuraavaksi teemme nimenomaisesti ensimmäisen <div> vedettävän lisäämällä attribuutin draggable:

Tallenna ja sulje tiedosto.

Katso lopuksi uudelleen index.html selaimessa. Jos napsautamme draggable <div> ja vedämme sen ruudun yli, sen liikkumisesta tulisi olla visuaalinen osoitus.

draggable -attribuutin oletusarvo on auto. Tämä tarkoittaa, onko elementti vedettävissä, riippuu selaimesi oletuskäyttäytymisestä. Tyypillisesti tämä tarkoittaa, että tekstivalinnat, kuvat ja linkit ovat vedettävissä määrittelemättä draggable="true".

Sinulla on nyt HTML-tiedosto, jossa on vedettävä elementti. Siirtymme onevent -käsittelijöiden lisäämiseen.

Vaihe 2 – Vedä ja pudota -tapahtumien käsitteleminen JavaScriptiä käyttäen

Tällä hetkellä, jos vapauta hiiri vetämällä vedettävää elementtiä, mitään ei tapahdu. DOM-elementtien vetämisen tai pudottamisen käynnistämiseksi meidän on käytettävä vedä ja pudota -sovellusliittymää:

• ondragstart: Tämä tapahtumankäsittelijä liitetään draggable -elementtiin ja käynnistyy, kun dragstart -tapahtuma tapahtuu.
• ondragover: Tämä tapahtumankäsittelijä liitetään elementtiin dropzone ja käynnistyy, kun dragover -tapahtuma tapahtuu.
• ondrop: Tämä tapahtumankäsittelijä liitetään myös dropzone -elementtiin ja käynnistyy, kun drop -tapahtuma tapahtuu.

Huomaa: Tapahtumankäsittelijöitä on yhteensä kahdeksan: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart ja ondrop. Esimerkissä emme vaadi niitä kaikkia.

Tarkastellaan ensin uutta https://www.digitalocean.com/community/tutorials/script.js -tiedostoa index.html:

Luo seuraavaksi uusi https://www.digitalocean.com/community/tutorials/script.js tiedosto:

DataTransfer -objekti seuraa nykyiseen vetoon liittyviä tietoja. Jos haluat päivittää elementtimme vetämällä ja pudottamalla, meidän on käytettävä suoraan objektia DataTransfer.Tätä varten voimme valita ominaisuuden dataTransfer DOM-elementin DragEvent -ominaisuudesta.

Huomaa: DataTransfer -objekti voi teknisesti seurata useiden samanaikaisesti vedettävien elementtien tietoja. Tässä esimerkissä keskitymme yhden elementin vetämiseen.

Objektin dataTransfer setData -menetelmä Voidaan käyttää asettamaan vedetyn tilan tiedot parhaillaan vedetylle elementille. Se vaatii kaksi parametria:

• merkkijono, joka ilmoittaa toisen parametrin muodon
• varsinainen siirrettävä data

Tavoitteenamme on siirtää draggable -elementtimme uuteen pääelementtiin. Meidän on pystyttävä valitsemaan draggable -elementtimme ainutlaatuisella id -elementillä. Voimme asettaa vedetyn elementin id -menetelmän setData -menetelmällä, jotta sitä voidaan käyttää myöhemmin.

Katsotaanpa käy uudelleen https://www.digitalocean.com/community/tutorials/script.js -tiedostossamme ja luo uusi toiminto käyttämään setData:

Huomaa: Internet Explorer 9-11: llä on tiettävästi ongelmia "text/plain" -palvelun kanssa. Muoto on "text" kyseistä selainta varten.

Päivitettäessä vedetyn kohteen CSS-tyyliä voimme käyttää sen tyylejä DOM-tapahtuman avulla uudelleen ja haluamiemme tyylien asettaminen currentTarget -komennoille.

Lisätään toimintoomme ja vaihdetaan backgroundColor muotoon yellow:

Huomaa: Muuttamasi tyylit on päivitettävä manuaalisesti uudelleen pudota, jos haluat vain vetää -tyylit. Jos muutat jotain, kun se alkaa vetää, vedetty elementti säilyttää uuden tyylin, ellet muuta sitä takaisin.

Meillä on nyt JavaScript-toiminto vetämisen aloitusta varten.

Voimme lisätä ondragstart draggable -elementtiin ryhmässä index.html:

Näytä index.html selaimessasi. Jos yrität vetää kohdetta nyt, toiminnossa ilmoitettu tyyli otetaan käyttöön:

Mitään ei kuitenkaan tapahdu kun vapautat napsautuksesi.

Seuraava tässä järjestyksessä käynnistetty tapahtumankäsittelijä on ondragover.

Tiettyjen DOM-elementtien oletusarvoinen pudotuskäyttäytyminen kuten <div> s selaimissa, ei yleensä hyväksy pudottamista. Tämä käyttäytyminen siepata käyttäytymisen, jota yritämme toteuttaa. Varmistaaksemme halutun pudotuskäyttäytymisen, käytämme preventDefault.

Käymme uudelleen https://www.digitalocean.com/community/tutorials/script.js -tiedostossa ja luo uusi funktio käyttämään preventDefault. Lisää tämä koodi tiedoston loppuun:

Nyt, voimme lisätä ondragover dropzone -elementtiin index.html:

Tässä vaiheessa emme ole vielä kirjoittaneet koodia käsittelemään varsinaista pudotusta. Viimeinen tässä järjestyksessä käynnistetty tapahtumankäsittelijä on ondrop.

Käy uudelleen https://www.digitalocean.com/community/tutorials/script.js -tiedostossa ja luo uusi toiminto .

Voimme viitata aiemmin tallentamiimme tietoihin dataTransfer -objektin setData -menetelmällä. Käytämme dataTransfer -objektin getData -menetelmää. Asettamamme tiedot olivat id, joten se palautetaan meille:

Valitse draggable -elementtimme haulla id:

Valitse dropzone elementti:

Liitä draggable -elementti kohtaan dropzone:

Nollaa dataTransfer -objektimme:

Nyt voimme lisätä ondrop dropzone -elementtiin index.html:

Kun se on valmis, meillä on valmis vedä ja pudota -ominaisuus. Näytä selaimesi index.html ja vedä draggable -elementti kohtaan dropzone.

Esimerkki käsittelee yksittäisen vedettävän kohteen ja yhden pudotuskohteen skenaarion. Sinulla voi olla useita vedettäviä kohteita, useita pudotuskohteita ja mukauttaa niitä kaikkien muiden Vedä ja pudota -sovellusliittymän tapahtumankäsittelijöiden kanssa.

Vaihe 3 – Edistyneen esimerkin luominen useille vedettäville kohteille

Tässä on vielä yksi esimerkki siitä, kuinka voit käyttää tätä sovellusliittymää: tehtävälista, jossa on vedettäviä tehtäviä, joista voit siirtyä "To-do" -sarakkeesta sarakkeeseen "Done".

Jos haluat luoda oman tehtäväluettelon, lisää lisää vedettäviä elementtejä, joilla on ainutlaatuinen id s – index.html:

Näytä index.html omassa ja vedä Tehtävät-sarakkeen kohteet Valmis-sarakkeeseen. Olet luonut tehtäväsovelluksen ja testannut toimintoja.

Johtopäätös

Tässä artikkelissa luot tehtäväluettelosovelluksen tutkiakseen vedä ja pudota -toimintoa. käytettävissä nykyaikaisissa selaimissa.

Vedä ja pudota -sovellusliittymä tarjoaa useita vaihtoehtoja toimintojesi mukauttamiseen vetämisen ja pudottamisen lisäksi. Voit esimerkiksi päivittää vedettyjen kohteiden CSS-tyylin. Lisäksi sen sijaan, että siirrät kohdetta, voit kopioida vedettävän kohteen niin, että se replikoituu pudotettaessa.

Muista, että vaikka monet verkkoselaimet tukevat tätä tekniikkaa, et ehkä voi luottaa siinä, jos yleisösi koostuu laitteista, jotka eivät tue tätä toimintoa.

Jos haluat lisätietoja Drag and Drop -sovellusliittymän kautta pudotettavasta, tutustu MDN: n asiakirjoihin.