HTML5 – Vedä ja pudota
Vedä ja pudota (DnD) on tehokas käyttöliittymäkonsepti, jonka avulla on helppo kopioida, järjestää uudelleen ja poistaa kohteita hiiren napsautuksella. Tämän avulla käyttäjä voi napsauttaa ja pitää hiiren painiketta alhaalla elementin päällä, vetää sen toiseen paikkaan ja pudottaa elementin sinne vapauttamalla hiiren painikkeen.
Vedä ja pudota -toiminnon saavuttamiseksi perinteisellä HTML4: llä kehittäjien on joko joko käytettävä monimutkaista JavaScript-ohjelmointia tai muita JavaScriptiä, kuten jQuery jne. koodaaminen on paljon helpompaa.
HTML 5 DnD: tä tukevat kaikki suuret selaimet, kuten Chrome, Firefox 3.5 ja Safari 4 jne.
Vedä ja pudota tapahtumat
On olemassa useita tapahtumia, jotka laukaistaan vetämisen ja pudottamisen eri vaiheissa. Nämä tapahtumat on lueteltu alla –
| Sr.Nro. | Tapahtumat & Kuvaus |
|---|---|
| 1 |
dragstart Käynnistyy, kun käyttäjä alkaa vetää objektia. |
| 2 |
dragenter Palaa, kun hiiri siirretään ensimmäisen kerran kohde-elementin päälle vetämisen aikana. Tämän tapahtuman kuuntelijan on ilmoitettava, onko pudotus sallittu tämän sijainnin yli. Jos kuuntelijoita ei ole tai kuuntelijat eivät suorita mitään toimintoja, pudotus ei ole oletusarvoisesti sallittu. |
| 3 |
siirtäminen Tämä tapahtuma käynnistetään, kun hiirtä siirretään elementin päälle, kun vetoa tapahtuu. Kuuntelijan aikana tapahtuva toiminta on suurelta osin sama kuin dragenter-tapahtuma. |
| 4 |
vetää Tämä tapahtuma käynnistyy, kun hiiri jättää elementin vetämisen aikana. Kuuntelijoiden on poistettava kaikki korostus- tai lisäysmerkinnät, joita käytetään pudotuspalauteessa. |
| 5 |
vedä Palaa joka kerta, kun hiirtä siirretään objektia vedettäessä. |
| 6 |
pudotus Pudotustapahtuma ammutaan elementille, johon pudotus tapahtui vetotoiminnon lopussa. Kuuntelija olisi vastuussa vedettävien tietojen noutamisesta ja sijoittamisesta pudotuspaikkaan. |
| 7 |
vedä Käynnistyy, kun käyttäjä vapauttaa hiiren painikkeen vedettäessä objektia. |
Huomaa – Huomaa, että vain vetotapahtumat käynnistyvät; hiiren tapahtumia, kuten hiiren siirtoa, ei käynnistetä vetotoiminnon aikana.
DataTransfer-objekti
Kaikkien vedä ja pudota -tapahtumien tapahtumakuuntelumenetelmät hyväksyvät tapahtumaobjektin, jolla on readonly-määritte dataTransfer.
Event.dataTransfer palauttaa tapahtumaan liittyvän DataTransfer-objektin seuraavasti –
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
DataTransfer-objekti sisältää tietoja vetämisestä ja pudota -toiminto. Nämä tiedot voidaan noutaa ja asettaa DataTransfer-objektiin liittyvien eri määritteiden suhteen alla kuvatulla tavalla –
| Sr.Nro. | DataTransfer-määritteet ja niiden kuvaus |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Palauttaa DOMStringList-luettelon vedonlyönti-tapahtumassa asetetut muodot. Lisäksi, jos tiedostoja vedetään, yksi tyypeistä on merkkijono ”Tiedostot”. |
| 4 |
dataTransfer.clearData () Poistaa määritettyjen tiedostomuotojen tiedot. Poistaa kaikki tiedot, jos argumentti jätetään pois. |
| 5 |
dataTransfer.setData (muoto, data) Lisää määritetyt tiedot. |
| 6 |
data = dataTransfer.getData (muoto) Palauttaa määritetyt tiedot. Jos tällaisia tietoja ei ole, palauta tyhjä merkkijono. |
| 7 |
dataTransfer.files Palauttaa vedettävien tiedostojen FileList-luettelon, jos sellaisia on. |
| 8 |
dataTransfer.setDragImage (elementti, x, y) Annettua elementtiä käytetään päivittämään vetopalaute korvaamalla kaikki aiemmin määritetyt palautteet. |
| 9 |
dataTransfer.addElement (elementti) Lisää annettu elementti luettelo elementeistä, joita käytetään vetopalautteen tuottamiseen. |
Vedä ja pudota -prosessi
Seuraavat ovat vaiheet, jotka suoritetaan vedä ja pudota -toiminnon toteuttamiseksi –
Vaihe 1 – Objektin tekeminen vedettäväksi
Tässä on suoritettavat vaiheet –
-
Jos haluat vetää elementtiä, sinun on määritettävä vedettävän attribuutin arvoksi true tälle elementille.
-
Aseta tapahtumakuuntelija, joka tarkkailee vedettäviä tietoja.
-
Tapahtumakuuntelijan käynnistys asettaa sallitut tehosteet (kopiointi, siirto, linkki tai jokin yhdistelmä).
Seuraava esimerkki tekee objektista vedettävän –
Tämä tuottaa seuraavan tuloksen –
Vaihe 2 – Objektin pudottaminen
Pudotuksen hyväksymiseksi pudotuskohteen on kuunneltava vähintään kolme tapahtumaa.
-
Dragenter-tapahtuma, jota käytetään määrittämään, onko pudotuskohde hyväksyttävä pudotus. . Jos pudotus on hyväksyttävä, tämä tapahtuma on peruutettava.
-
Siirtotapahtuma, jolla määritetään, mitä palautetta käyttäjälle näytetään. Jos tapahtuma peruutetaan, palaute (tyypillisesti kohdistin) päivitetään dropEffect-attribuutin arvon perusteella.
-
Lopuksi pudotustapahtuma, joka sallii varsinaisen pudotuksen suoritettava.
Seuraava on esimerkki kohteen pudottamisesta toiseen objektiin –
Tämä tuottaa seuraavan tuloksen –