Opprette en Parkeringsplass Spillet Med HTML-Dra og Slipp-API

0
65

Blant de mange JavaScript-Api-er lagt i HTML5 var Dra-og-Slipp (vi vil referere til det som If i denne artikkelen) som brakte native If støtte til nettleseren, noe som gjør det enklere for utviklere å implementere denne interaktive funksjonen til programmene. Den fantastiske ting som skjer når man har blitt lettere å gjennomføre, er at folk begynner å gjøre alle slags dumt, upraktisk ting med det, slik vi gjør i dag: en parkeringsplass spillet!

If krever bare noen få ting til å fungere:

  • Noe å dra
  • Et sted å slippe
  • JavaScript-event handlers på målet for å fortelle leseren at det kan slippe

Vi kommer til å starte med å lage vår draggables.

Å dra

Både <img> og <a>(med href-attributtet) elementer er draggable som standard. Hvis du vil dra et annet element du trenger for å sette draggable-attributtet til true.

Vi vil starte med HTML-koden som stiller opp på bilder for våre fire kjøretøy: brannbil, ambulanse, bil og sykkel.

<ul class=”kjøretøy”>
<li>
<!– Brann Lastebil –>
<!– <code>tag ‘ en<code> – elementer trenger ikke en <code>draggable<code> – attributtet som andre elementer –>
<img id=”brann-truck” alt=”brannbil” src=”https://cdn.glitch.com/20f985bd-431d-4807-857b-e966e015c91b%2Ftruck-clip-art-fire-truck4.png?1519011787956″/>
</li>
<li>
<!– Ambulanse –>
<img id=”ambulanse” alt=”ambulanse” src=”https://cdn.glitch.com/20f985bd-431d-4807-857b-e966e015c91b%2Fambulance5.png?1519011787610″>
</li>
<li>
<!– Bil –>
<img id=”bil” alt=”bil” src=”https://cdn.glitch.com/20f985bd-431d-4807-857b-e966e015c91b%2Fcar-20clip-20art-1311497037_Vector_Clipart.png?1519011788408″>
</li>
<li>
<!– Sykkel –>
<img id=”sykkel” alt=”sykkel” src=”https://cdn.glitch.com/20f985bd-431d-4807-857b-e966e015c91b%2Fbicycle-20clip-20art-bicycle3.png?1519011787816″>
</li>
</ul>

Siden bildene er draggable som standard, får du se å dra noen av dem skaper et spøkelse bilde.

Bare legge til en draggable attributt til et element som ikke er et bilde eller link er egentlig alt du trenger å gjøre et element draggable i de fleste nettlesere. For å gjøre elementer draggable i alle nettlesere, må du definere noen event-handlere. De er også nyttige for å legge til ekstra funksjonalitet som en ramme om et element er å bli dratt rundt eller en lyd hvis det slutter å være dratt. For disse, du kommer til å trenge noen å dra event handlers, så la oss se på de.

Dra Arrangementer

Det er tre dra-relaterte hendelser du kan lytte til, men vi er bare kommer til å bruke to: dragstart og dragend.

  • dragstart – Utløses så snart vi begynner å dra. Dette er hvor vi kan definere dra data og dra effekt.
  • dragend – Aktivert når en draggable element er droppet. Denne hendelsen er generelt sparket rett etter drop zone ‘ s drop event.

Vi kommer tilbake med hva dra data og dra effekten er kort tid.

la dratt; // Holder styr på hva som blir dratt – vi kommer til å bruke dette senere!

funksjonen onDragStart(hendelse) {
la target = event.målet;
hvis (target && target.nodeName === ‘IMG’) { // Hvis målet er et bilde
dratt = mål;
event.dataTransfer.setData(‘tekst’, target.id);
event.dataTransfer.dropEffect = ‘flytt’;
// Gjør det halv gjennomsiktig når den blir dratt
event.målet.stil.opacity = .3;
}
}

funksjonen onDragEnd(hendelse) {
hvis (event.mål && event.målet.nodeName === ‘IMG’) {
// Tilbakestille åpenhet
event.målet.stil.opacity = “; // Tilbakestill dekkevne når du drar ender
dratt = null;
}
}

// Legger til hendelsen lyttere
const kjøretøy = – dokument.querySelector(‘.kjøretøy’);
biler.addEventListener(‘dragstart’, onDragStart);
biler.addEventListener(‘dragend’, onDragEnd);

Det er et par ting som skjer i denne koden:

  • Vi definerer dra data. Hver dra event har en egenskap som heter dataTransfer som lagrer event data. Du kan bruke setData(type, data) metode for å legge til en dratt element for å dra data. Vi oppbevarer dratt bilde-ID som type ‘tekst’ i linje 7.
  • Vi lagrer elementet blir dratt i en global variabel. Jeg vet, jeg vet. Globalt er farlig for scoping men her er hvorfor vi gjør det: selv om du kan lagre dratt element ved hjelp av setData, kan du ikke hente den ved hjelp av hendelsen.dataTransfer.getData() i alle nettlesere (unntatt Firefox) fordi den drar data er beskyttet modus. Du kan lese mer om det her. Jeg ønsket å nevne definere dra data bare så du vet om det.
  • Vi er stille dropEffect å flytte. Den dropEffect egenskapen brukes til å kontrollere tilbakemeldinger brukeren er gitt under en dra og slipp-operasjon. For eksempel, det endringer som markøren nettleseren viser mens du drar. Det er tre effekter: kopiere, flytte og link.
    • kopi – Betyr at data som blir dratt vil bli kopiert fra sin kilde til fallet beliggenhet.
    • flytte – Betyr at data som blir dratt vil bli flyttet.
    • link – Indikerer at i noen form for forholdet vil bli opprettet mellom kilde-og-slipp-steder.

Nå har vi draggable kjøretøy, men ingen steder å slippe dem:

Se Pen 1 – Kan du parkere her? ved Omayeli Arenyeka (@yelly) på CodePen.

Slippe

Som standard, når du drar et element, bare form elementer som <input> – vil være i stand til å akseptere det som en dråpe. Vi kommer til å inneholde våre “dropzone” i en <section> – element, slik at vi må legge slippe event-handlere så det kan akseptere dråper akkurat som et element.

Først, siden det er et tomt element vi kommer til å trenge for å angi en bredde -, høyde-og bakgrunnsfarge på det, så vi kan se det på skjermen.

Dette er parameterne som vi har tilgjengelig for å slippe hendelser:

  • dragenter – Utløst i øyeblikket en draggable element går inn i en droppable området. Minst 50% av draggable element har til å være inne i slippsonen.
  • dragover – Det samme som dragenter men det er kalt gjentatte ganger mens draggable elementet er i slippsonen.
  • dragleave – Utløses når en draggable element har gått bort fra en drop zone.
  • drop – Utløst når draggable element har blitt lansert, og drop-området enig for å godta slippe.

funksjonen onDragOver(hendelse) {
// Hindre standard for å tillate slipp
event.preventDefault();
}

funksjonen onDragLeave(hendelse) {
event.målet.stil.bakgrunnen = “;
}

funksjonen onDragEnter(hendelse) {
const target = event.målet;
hvis (target) {
event.preventDefault();
// Sett dropEffect å flytte
event.dataTransfer.dropEffect = ‘flytt’
målet.stil.bakgrunnen = ‘#1f904e’;
}
}

funksjonen onDrop(hendelse) {
const target = event.målet;
hvis ( target) {
målet.stil.backgroundColor = “;
event.preventDefault();
// Få id-en til mål og legge flyttes elementet til målet er DOM
dro.parentNode.removeChild(dro);
dro.stil.opacity = “;
målet.appendChild(dro);
}
}

const dropZone = – dokument.querySelector(‘.drop-zone’);
dropZone.addEventListener(‘drop”, onDrop);
dropZone.addEventListener(‘dragenter’, onDragEnter);
dropZone.addEventListener(‘dragleave’, onDragLeave);
dropZone.addEventListener(‘dragover’, onDragOver);

Hvis du lurer på hvorfor vi holder kaller hendelsen.preventDefault() det er på grunn av standard nettleser forutsetter at alle mål er ikke en gyldig slipp-mål. Dette er ikke sant hele tiden for alle nettlesere, men det er bedre å være safe than sorry! Kall preventDefault() på dragenter, dragover-og-slipp-arrangementer, informerer leseren om at det gjeldende målet er en gyldig slipp-mål.

Nå, vi har en enkel dra-og-slippe programmet!

Se Pen 2 – Kan du parkere her? ved Omayeli Arenyeka (@yelly) på CodePen.

Det er gøy, men ikke fullt så frustrerende som parkering. Vi må lage noen regler for å gjøre det skje.

Regler og Validering

Jeg kom opp med noen tilfeldige parkering regler, og jeg vil oppfordre deg til å lage noen av dine egne. Parkering tegn har vanligvis dager og tider du kan parkere samt hvilke typer kjøretøy som er tillatt å parkere på det tidspunktet. Når vi skulle lage vår draggable objekter, hadde vi fire biler: en ambulanse, en brannbil, en vanlig bil og en sykkel. Så, vi kommer til å lage regler for dem.

  1. Ambulanse parkering kun: mandag til fredag, 9 pm til 3am.
  2. Brann lastebil parkering bare: Alle dag i løpet av helgen.
  3. Vanlig bil parkering: mandag til fredag, 3am til 3 pm.
  4. Sykkelparkering: mandag til fredag kl 3 pm til 9 pm.

Nå, vi oversette disse reglene kode. Vi kommer til å bruke to biblioteker for å håndtere tid og varierer: Øyeblikk og Øyeblikk-området.

Skriptene er allerede tilgjengelig i Codepen for å legge til en ny demo, men hvis du er utvikler utenfor Codepen du kan kopiere eller koble dem opp her:

<script utsette src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js”></script>
<script utsette src=”https://cdnjs.cloudflare.com/ajax/libs/moment-range/3.1.1/moment-range.js”></script>

Deretter oppretter vi et objekt til å lagre all parkering regler.

vinduet[‘øyeblikk-range”].extendMoment(øyeblikk);

// Array av ukedager
const hverdager = [‘mandag’, ‘tirsdag’, ‘onsdag’, ‘torsdag’, ‘fredag’];
const parkingRules = {
ambulanse: {
// Ambulanse kan kun parkere på hverdager…
dager: hverdager
// …fra 9 pm til 3am (neste dag)
ganger: createRange(for øyeblikket().sett(‘time’, 21), øyeblikk().legg til(1, ‘dag’).sett(‘time’, 3))
},
“fire truck’: {
// Brannbil kan obnly park på lørdager og søndager, men hele dagen
dager: [‘lørdag’, ‘søndag’]
},
bil: {
// Bilen kan kun parkere på hverdager…
dager: hverdager
// …fra 3 am – 3 pm (samme dag)
ganger: createRange(for øyeblikket().sett(‘time’, 3), øyeblikk().sett(‘time’, 15))
},
sykkel: {
// Bilen kan kun parkere på hverdager…
dager: hverdager
// …fra 3 pm – 9 pm (samme dag)
ganger: createRange(for øyeblikket().sett(‘time’, 15), øyeblikk().sett(‘time’, 21))
}
};

funksjonen createRange(start, slutt) {
hvis (start && end) {
tilbake øyeblikk.rekkevidde(start, slutt);
}
}

Hvert kjøretøy i parkingRules objekt har en dager eiendom med et bredt utvalg av days det kan parkere og en times eiendommen som er en tidsperiode. For å få aktuell tid ved hjelp av Øyeblikket, ring for øyeblikket(). For å skape et område ved hjelp av Øyeblikk-området, passere en start-og slutt-tidspunktet til det øyeblikket.utvalg funksjon.

Nå, i onDragEnter og onDrop event-handlere vi definert tidligere, legger vi på noen sjekker for å sikre at en bil kan parkere. Våre alt-attributtet på img-koden er å lagre den type kjøretøy, slik at vi passere som en canPark metode som vil komme dersom bilen kan parkeres. Vi har også lagt til visuelle signaler (endring i bakgrunnen) for å fortelle brukeren om et kjøretøy kan parkeres eller ikke.

funksjonen onDragEnter(hendelse) {
const target = event.målet;
hvis (dratt && target) {
const vehicleType = dratt.alt; // e.g sykkel, ambulanse
hvis (canPark(vehicleType)) {
event.preventDefault();
// Sett dropEffect å flytte
event.dataTransfer.dropEffect = ‘flytt’;
/* Endre farge til grønt for å vise at det kan bli droppet /*
målet.stil.bakgrunnen = ‘#1f904e’;
}
else {
/* Endre farge til rødt for å vise at det ikke kan bli droppet. Vi merker
* ikke kalle arrangementet.preventDefault() her, slik at leseren ikke
* la en dråpe som standard
*/
målet.stil.backgroundColor = ‘#d51c00’;
}
}
}

funksjonen onDrop(hendelse) {
const target = event.målet;
hvis (target) {
const data = event.dataTransfer.getData(‘tekst’);
const dratt = – dokument.bürgerliches(data);
const vehicleType = dratt.alt;
målet.stil.backgroundColor = “;
hvis (canPark(vehicleType)) {
event.preventDefault();
// Få ID-en til mål og legge flyttes elementet til målet er DOM
dro.stil.opacity = “;
målet.appendChild(dro);
}
}
}

Da skaper vi canPark metode.

funksjonen getDay() {
tilbake øyeblikk().format(‘dddd’); // format som ‘mandag’ ikke 1
}

funksjonen getHours() {
tilbake øyeblikk().time();
}

funksjonen canPark(kjøretøy) {
/* Sjekk tid og type kjøretøy som blir dratt
* for å se om det kan parkere på denne tiden
*/
hvis (bil && parkingRules[kjøretøy]) {
const regler = parkingRules[kjøretøy];
const validDays = regler.dager;
const validTimes = regler.ganger;
const curDay = getDay();
hvis (validDays) {
/* Hvis gjeldende dag er inkludert på parkering dager for kjøretøy
* Og hvis den gjeldende tiden er innenfor rekkevidde
*/
tilbake validDays.inkluderer(curDay) && (validTimes ? validTimes.inneholder(for øyeblikket()) : true);
/* Øyeblikk.området har en inneholder en funksjon som sjekker
* for å se om området inneholder et øyeblikk.
https://github.com/rotaready/moment-range#contains
*/
}
}
return false;
}

Nå, bare biler som er tillatt å parkere kan parkere. Til slutt, vi legge til regler til skjermen og style det.

Her er det endelige resultatet:

Se Pen 3 – Kan du parkere her? ved Omayeli Arenyeka (@yelly) på CodePen.

Det er mange måter å gjøre dette på kunne vært bedre:

  • Auto-genererer HTML for reglene liste fra parkingRules objekt!
  • Legg til noen lydeffekter!
  • Legg til muligheten til å dra tilbake biler til opprinnelige point uten en side oppdater.
  • Alle de irriterende globale variabler.

Men jeg skal la deg håndtere det.

Hvis du er interessert i å lære mer om If API og noen kritikk av det, her er noen god lesing:

  • WHATWG Spesifikasjon
  • Å jobbe med HTML5 Dra-og-Slipp – Pro Programmering HTML5, Kapittel 9, av Jen Simmons
  • Tilgjengelig Dra-og-Slipp ved Hjelp av WAI-ARIA – Tilgjengelighet vurderinger fra Dev.Opera
  • Native HTML5 Dra-og-Slipp – HTML5 Steiner opplæringen
  • HTML5-dra og slipp-katastrofe – QuirksMode post med nyttig sammenheng på If-modul gjennomføring