Jo pitkään on olemassa JavaScript-toimintoja, joiden avulla voimme luoda vedä ja pudota rajapintoja, mutta mikään näistä toteutuksista ei ollut selaimessa luontaista.

HTML5: ssä meillä on kotimainen menetelmä luoda vedä ja pudota rajapintoja (vähän JavaScript-tuen avulla).

Aion päästää sinut siihen, miten tämä saavutetaan ...

Selaintuki

Haluaisin saada tämän pois tieltä ennen kuin edistyksemme: tällä hetkellä HTML5-vedon ja pudotuksen tukevat kaikki tärkeät työpöytäselaimet (mukaan lukien IE (jopa IE 5.5 on osittainen tuki)), mutta sitä ei tue tällä hetkellä mihinkään suosittuun mobiiliin selaimet.

Vedä ja pudota tapahtumia

Vedä ja pudota -toiminnon jokaisessa vaiheessa aktivoidaan toinen tapahtuma, jotta selain tietää, mitä JavaScript-koodia suoritetaan. tapahtumat ovat:

  • dragStart: käynnistyy, kun käyttäjä aloittaa elementin vetämisen.
  • dragEnter: käynnistyy, kun vedettävää elementtiä vetää ensin kohde-elementti.
  • dragOver: paloaa, kun hiirtä siirretään elementin päälle, kun vetovoima ilmenee.
  • dragLeave: käynnistetään, jos käyttäjän kohdistin jättää elementin vetämällä.
  • vedä: paloaa aina, kun siirrämme hiirtä elementin vetämisen aikana.
  • pudotus: käynnistetään, kun todellinen pudotus suoritetaan.
  • dragEnd: käynnistyy, kun käyttäjä vapauttaa hiiren vetämällä kohdetta.

Kaikilla näillä tapahtumien kuuntelijoilla on paljon valtaa siitä, miten käyttöliittymä toimii ja miten se toimii eri olosuhteissa.

DataTransfer-objekti

Tässä kaikki vedä ja pudota taika tapahtuu; tämä objekti pitää sisällään tiedot, jotka lähetettiin vetotoiminnolla. Tiedot voidaan asettaa ja hakea eri tavoin, tärkeimmät ovat:

  • dataTransfer.effectAllowed = arvo: tämä palauttaa sallitun toimintatyypit, mahdolliset arvot eivät ole, kopioi, copyLink, copyMove, linkki, linkki Siirrä, siirrä, kaikki ja aloittamaton.
  • dataTransfer.setData (muoto, data): lisää määritetyn datan ja sen muodon.
  • dataTransfer.clearData (muoto): tyhjentää kaikki tietyn muodon tiedot.
  • dataTransfer.setDragImage (elementti, x, y): asettaa kuvan, jonka haluat vetää, x- ja y-arvot määrittävät, missä hiiren kohdistin on (0, 0 sijoittaa sen vasemmalle yläkulmaksi).
  • data = dataTransfer.getData (muoto): Kuten nimestä kerrotaan, se palauttaa tietyn muodon käytettävissä olevat tiedot.

Vedä ja pudota esimerkki

Nyt aloitamme luomisen yksinkertainen vedä ja pudota esimerkki, voit nähdä, että meillä on kaksi pientä divs ja suurempaa, voimme vetää ja pudottaa pienten sisällä iso, ja voimme jopa siirtää ne takaisin.

Vedä objekti

Ensin meidän on tehtävä HTML-koodi. Teemme divs draggable kanssa draggable attribuutti, kuten:

draggable="true">

Kun tämä on tehty, meidän on määritettävä JavaScript-funktio, joka ajetaan, kun aloitamme tämän elementin vetämisen:

function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));   ev.dataTransfer.setDragImage(ev.target,100,100);return true;}

Tässä koodissa ilmoitamme ensin, minkälainen vaikutus sallitessamme operaatiossa ja asetamme sen liikuttamaan, toisessa rivissä asetetaan operaation tiedot ja tässä tapauksessa tyyppi on Teksti ja arvo on elementin tunnus me vetämme. Tämän jälkeen käytämme setDragImage- menetelmää asettamalla mitä me vetämme ja sitten kohdistimen ollessa vetämällä, ja kun kuutiot ovat 200 200px, sijoitin sen keskelle. Lopuksi palaamme totta.

Kohde hylätään

Jotta elementti voi hyväksyä pudotuksen, sen täytyy kuunnella kolmea erilaista tapahtumaa: dragEnter, dragOver ja myös pudotus tapahtuma, joten lisää tämä html: lle div: ssä iso:

Nyt, kun lisäsimme tapahtuman kuuntelijoita, meidän on luotava nämä toiminnot, jotka aloitamme dragenter- ja dragover-tapahtumissa:

function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}

Ensimmäisessä toiminnossa määritellään, mitä haluamme tapahtua, kun elementti, jota vedämme, saavuttaa elementin, jonka se on tarkoitus pudota, tässä tapauksessa estämme vain selaimen oletuskäyttäytymisen, mutta voit tehdä useita asioita, kuten muuttaa taustalle tai lisää tekstiä, joka osoittaa, että käyttäjä vetää oikeaan alueeseen ja käyttämällä dragleave-tapahtumaa voit palauttaa tehdyt muutokset. Seuraavaksi dragOver- toiminnolla yksinkertaisesti estämme oletusarvon sallia pudotuksen.

Seuraavassa osassa määritellään toiminto, kun voimme itse asiassa pudottaa elementin haluttuun kohteeseen:

function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}

Tässä viimeisessä osassa asetimme ensin muuttuja nimeltä data, jossa saamme kaiken tekstimuodossa olevan datan ja liitetään sitten ne tiedot (jotka tulevat elementiksi, jota vedämme) diville, jossa halutaan pudottaa elementti. Lopuksi lopulliset kosketukset kuten pysäyttämisen eteneminen ja palaaminen vääriä.

Osion tekeminen pudotuskohteeksi

Tarkistetaan demo , voit nähdä, että varmistimme myös, että nämä kaksi divs voidaan vetää takaisin alkuperäiseen paikkaansa. Onneksi, lisäämällä toisen pudotuskohteen voi olla yksinkertaisempi kuin luulet; koska toiminnot ovat jo valmiina, meidän on vain lisättävä tapahtumien kuuntelijat, kuten:

Ja tämä on kaikki, mitä tarvitsemme, jotta divs voidaan vetää alkuperäiseen paikkaan.

johtopäätös

Runsaasti vedä ja pudota sovelluksia, jotka on rakennettu JavaScript-kirjastojen avulla, ja on usein yksinkertaisempaa käyttää näitä kirjastoja. Mutta toivon, että tässä HTML5- ja JavaScript-tekniikassa näette natiivin ratkaisun mahdollisuudet tulevaisuudessa.

Oletko rakentanut vedä ja pudota käyttöliittymän? Miten natiivi HTML5 vertaa puhtaisiin JavaScript-ratkaisuihin? Kerro meille kommentit.

Esitetty kuva / pikkukuva, pudota kuva valokuvan avulla.