HTML5 on mahdollista vetää ja pudottaa HTML-elementtejä sisällä HTML-sivun. JavaScript-tapahtuman kuuntelijoiden kautta voit päättää, mitä tapahtuu, kun käyttäjä vetää ja pudottaa elementtejä.
Aikana vedä ja pudota HTML-elementtejä voi ottaa kaksi roolia:
- Vedettäviä
- Pudota kohde / drop zone.
vedettäviä elementti on elementti, johon käyttäjä olisi voinut vetää noin HTML-sivun ja pudota jonnekin, jotkut toiminta tapahtuu. Tämä voi olla yksi tai useampi Elementti.,
pudotustavoite tai pudotusvyöhyke on elementti, johon vedettävät elementit pudotetaan.
Vedä ja Pudota Tapahtumia
valvoa, mitä tapahtuu, kun vetämällä ja pudottamalla HTML-elementtejä, sinun täytyy tehdä 3 vaihetta:
- Aseta HTML-elementtejä vedettäviä.,
- Liitä tapahtuma kuuntelijat vedettäviä HTML-elementtejä
- Liitä tapahtuma kuuntelijoita pudota tavoite HTML-elementtejä
tapahtumat ja ominaisuudet on kuvattu täällä:
Ensimmäinen asetat draggable="true" attribuutti on HTML-elementti(s) tehdä vedettäviä.
Toinen liität tapahtuman kuuntelijoita vedettäviä elementti dragstart ja dragend tapahtumia., Näiden tapahtumakuuntelijoiden sisällä voit toteuttaa mitä tapahtuu, kun käyttäjä alkaa raahata elementtiä ja kun vetäminen loppuu.
kolmas kiinnität tapahtumakuuntelijat pudotuskohdeelementtiin. Tapahtumia voit kuunnella ovat dragenter, dragover, dragleave ja drop.
dragenter tapahtuma on ammuttu, kun käyttäjä vetää päälle vedettäviä pudota tavoite., Tämä tapahtuma vain välähtää, kun vedettäviä elementti muuttuu olemasta ulkona on yli, joka on tyypillisesti määräytyy asemaa hiiren kursori.
Kun vedettäviä elementti on yli pudota kohde, dragover tapahtuma tulipalot, ja pitää ampua niin kauan kuin vedettäviä elementti on kestänyt yli pudota tavoite.
Jos käyttäjä raahaa vedettäviä esine pois pudota kohde jälleen dragleave tapahtuma on ammuttu.
Jos käyttäjä putoaa vedettäviä esine pudota kohde, drop tapahtuma on ammuttu.,
vedä ja pudota-Tapahtuman esimerkki
tässä on esimerkki, jolla voit pelata. Yritä vetää HTML5 logo päälle pudota tavoite ja nähdä, mitä tapahtuu. Kokeile sekä kuvan pudottamista että sen vetämistä uudelleen esiin.
dragend:
dragenter:
dragover:
dragleave:
pudota:
Vedä ja Pudota-Koodi
Anna meille katsomaan miten käsitellä vedä ja pudota tapahtumia., Nähdä, että meidän tulee ensin luoda <img> elementti, jonka voimme vetää. Tässä on HTML-koodi, että:
<img src="http://tutorials.jenkov.com/html5/..." draggable="true">
Kun meillä on vedettäviä elementti meidän täytyy pudota kohde. Aion käyttää <div> elementti:
<div style="width: 200px; height: 200px;">Drop here</div>
Kun meillä on vedettäviä elementti ja pudota kohde-elementti, meidän täytyy liittää tapahtuman kuulijoita., Tässä on JavaScript-koodi, että:
dragStart() funktiokutsut event.dataTransfer.setData() jotta asettaa tietoja, jotka on siirretty pudota kohde, kun elementti on laskenut. Mitä tietoja tarvitset oikein loppuun pudotustoiminnon, aseta se tähän. Asetat sekä datan että sen mime-tyypin.
dragOver() ja drop() tapahtuman käsittelijät sekä soittaa event.preventDefault() ja palaa vääriä. Tämä on tarpeen, jotta vedä ja pudota toimivat kunnolla., Selain voi olla joitakin default vedä ja pudota toiminta, joka sinun täytyy poistaa, jotta koodi toimi.
Huomaa myös, että drop() event handler-funktio lukee tiedot asetettu dragStart() kautta puhelun event.dataTransfer.getData(). Se ohittaa MIME-tyypin tietojen parametrina, jotta se saadaan kunnolla purettua.
Tämä on kaikki, mitä tarvitaan vetämään ja pudottamaan HTML5: ssä. Voit tehdä siitä hieman visuaalisesti miellyttävä vaikka, kuten näemme seuraavassa osassa.,
visuaalinen palaute
voit käyttää drag and drop-tapahtumakäsittelytoimintoja antamaan käyttäjälle selkeämpää visuaalista palautetta.
Ensinnäkin voit merkitä raahattavan elementin siten, että käyttäjä näkee, mitä elementtiä hän vetää. Jos useat elementit näyttävät samalta ja niitä kaikkia voi raahata, käyttäjän on mukava nähdä, kumpaa niistä raahataan. Voit tehdä sen vastauksena dragstart tapahtumaan. Tässä on esimerkki:
Kun veto loppuu, haluamme kuitenkin poistaa rajan uudelleen., Tämä tapahtuu vastauksena dragend tapahtuma. Näin se tehdään:
Nyt käyttäjä saa visuaalista palautetta, josta näkyy, mitä elementtiä raahataan.
haluamme myös näyttää käyttäjälle, että draggable-elementti on mahdollista pudottaa, kun se vedetään pudotuskohteen yli. Jälleen me muutamme elementin rajaa. Teemme niin vastauksena dragenter, dragleave ja drop tapahtumia., Näin tehdään:
nyt pudotuskohteen raja muuttuu vihreäksi ja murskaantuu, kun raahattava Elementti vedetään sen yli. Raja poistetaan, kun vedettäviä elementti on vedetty ulos, tai jos elementti on pudonnut pudota tavoite.
esimerkissä ei näytä dragOver() event handler-funktio, mutta varmista, että et lisää se estää oletuksena selaimen käyttäytymiseen.,
Tässä on koodi kokonaisuudessaan sen jälkeen, kun visuaalinen palaute on ollut seuraavasti:
Myös DataTransfer Esine, effectsAllowed, dropEffect ja setDragImage()
Voit lisätä visuaalinen palaute annetaan käyttäjälle aikana vedä ja pudota toimia käyttäen DataTransfer objekti. DataTransfer objektilla on 2 attribuuttia ja yksi toiminto, jota voit käyttää tähän tarkoitukseen., Nämä ovat:
- effectsAllowed
- dropEffect
- setDragImage()
Voit käyttää DataTransfer objekti dragstart ja drop tapahtuma esineitä. Tässä on esimerkki dragstart kuuntelija toiminto, joka asettaa effectsAllowed omaisuutta DataTransfer tavoite:
effectsAllowed omaisuus on käytetty selaimet, muuttaa hiiren kursori näyttää, mitä toimia suoritetaan, kun vetämällä ja pudottamalla elementti., Tyypillisesti hiiren kursori muuttuu, kun raahattu elementti on pudotuskohteen yläpuolella. Ei ennen. Kelvolliset arvot effectsAllowed omaisuus ovat:
- ei mitään
- kopioi
- liikkuvat
- copyMove
- linkki
- linkMove
- copyLink
- kaikki
- alustamattoman
dropEffect on tarkoitus näyttää käyttäjälle kautta (kohdistin) mitä tapahtuu, kun hiiri leijuu pudota kohde, mutta tätä kirjoitettaessa (helmik. 2014) selaimet näyttävät sivuuttavan tämän., Kelvolliset arvot dropEffect omaisuus ovat:
- ei mitään
- kopioi
- linkki
- liikkuvat
setDragImage(image, x, y) toiminto voidaan asettaa kuva näkyy selaimessa, kun käyttäjä raahaa elementti. Oletuksena selain näyttää semi-läpinäkyvä kopio alkuperäisestä elementti, mutta jos haluat eri kuvan, voit asettaa eri kuvan käyttämällä tätä toimintoa. x ja y ominaisuudet voidaan asettaa sijainti siirtymät kuvan, kun näkyy., Oletuksena vetokuvan vasen yläkulma sijaitsee hiiren osoittimen kärjessä. Asettamalla eri x ja y ominaisuudet voit muuttaa tätä. Voit käyttää joko positiivinen tai negatiivinen x ja y siirtymät.
Tässä on koodi, esimerkki osoittaa, miten asettaa vetämällä kuvan sisällä dragStart() tapahtuman kuuntelija toiminto:
Tässä on esimerkki, jonka avulla voit pelata eri asetukset DataTransfer objekti., Yritä muuttaa effectsAllowed ja vedä kuvaa ja katso, mitä tapahtuu, kun vedät HTML5-logo alas div pudota kohde.
Vetämällä Tiedostoja Selaimeen
on mahdollista vetää tiedostoja suoraan selaimen file system, ja lukea nimi ja sisältö vetää tiedostoja JavaScript. Teet sen HTML5 – TIEDOSTORAJAPINNAN kautta., Tässä on pudotuskohdekuuntelija, joka havaitsee raahatun tiedoston tiedostonimen:
var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i Notice how the
function does not call the function, but instead accesses the property of the . The property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon). You can read more about how to access the dragged files in my HTML5 file API tutorial.