Lær å bruke HTML5 Drag and Drop API

HTML5 Drag and Drop (DnD) -spesifikasjonen, også kjent som HTML5 DnD API, definerer den hendelsesbaserte dra- og slipp-mekanismen som gjør det mulig å flytte et visuelt element med en pekeenhet. Dra involverer en mus ned hendelse etterfulgt av en mus bevegelse hendelse, og slippet blir utløst når musepekeren slippes. Et interessant forbehold er at spesifikasjonen ikke definerer nøyaktig hva en dra-og-slipp-operasjon faktisk er, men oppgir at en dra-og-slipp-operasjon må ha et utgangspunkt (museklikk eller filvalg) når den er implementert. kan være et hvilket som helst antall mellomtrinn, det må ha et sluttpunkt der mus eller peker slippes, eller operasjonen avbrytes.

Nettleserstøtte for DnD

Nettleserstøtte for HTML5 DnD API er listet nedenfor som funnet på Can I Use Dra and Drop:

  1. IE 10.0
  2. Firefox 18.0+
  3. Chrome 24.0+
  4. Safari 5.1+
  5. Opera 12.1+
For øyeblikket støttes ikke DnD API av noen mobile nettlesere, og ett kjent problem eksisterer med Chrome, der DataTransfer.addElement ikke er implementert. Den korte tabellen med nettleserstøtte vises i figur B nedenfor:

Klikk for å forstørre.

DnD-arrangementer

Det er en rekke hendelser som kan festes under hele DnD-prosessen, og disse hendelsene blir avfyrt i forskjellige stadier av den typiske dra og slipp-operasjonen. Merk at under drabearbeidelsene ikke blir avspillet noen mushendelser under draoperasjonen. De syv DnD-hendelsene som er oppført i spesifikasjonen, vises i tabellen nedenfor:

arrangementer

Beskrivelse

dragstart Avfyres på et element når en dra begynner. Når brukeren ber om å dra elementet blir drattestart-hendelsen avfyrt, og under denne hendelsen vil en lytter stille inn informasjon, slik at dragdataene og bildet skal knyttes til dra.
dragenter Avfyres når musen først blir flyttet over et element mens en dra oppstår. En lytter for denne hendelsen skal indikere om en slipp er tillatt over dette stedet. Hvis det ikke er lyttere, eller lytterne ikke utfører noen operasjoner, er en slipp ikke tillatt som standard. Dette er også hendelsen du kan lytte til hvis du vil gi tilbakemelding om at det er tillatt å slippe, for eksempel å vise et høydepunkt eller innsettingsmarkør.
dragover Denne hendelsen blir avfyrt når musen blir flyttet over et element når en dra oppstår. Mye av tiden vil operasjonen som oppstår under en lytter være den samme som dragenter-hendelsen.
dragleave Denne hendelsen blir avfyrt når musen forlater et element mens en dra oppstår. Lytterne bør fjerne markeringer eller markeringer som brukes for tilbakemelding.
dra Denne hendelsen blir avfyrt på kilden til dra, det vil si elementet der dragstart ble avfyrt, under draoperasjonen.
miste Slipphendelsen blir avfyrt på elementet der slippet skjedde ved slutten av dra-operasjonen. En lytter vil være ansvarlig for å hente inn dataene som blir dratt og sette dem inn på slippstedet. Denne hendelsen vil bare skje hvis en dråpe er ønsket. Det utløses ikke hvis brukeren kansellerte draoperasjonen, for eksempel ved å trykke på Escape-tasten, eller hvis museknappen ble sluppet mens musen ikke var over et gyldig slippmål.
dragend Kilden til dra vil motta en dragend-hendelse når draoperasjonen er fullført, enten den var vellykket eller ikke.

DataTransfer Object Property

DataTransfer- egenskapen til alle dra-hendelser er der den virkelige mekanismen bak API-en oppstår, det er her den inneholder data om dra-og-slipp-operasjonen. DataTransfer- objektene brukes under dra-og-slipp-hendelser, og er bare gyldige mens disse hendelsene blir avfyrt. De ni dataoverføringsattributtene som er oppført i spesifikasjonen og tilhørende beskrivelser er listet opp nedenfor:

Dataoverføringsobjekt

Beskrivelse

dataTransfer .dropEffect = verdi Returnerer typen operasjon som for øyeblikket er valgt. Hvis typen operasjon ikke er en av de som er tillatt av attributtet effectAllowed, vil operasjonen mislykkes. Kan stilles inn, for å endre den valgte operasjonen

De mulige verdiene er "ingen", "kopier", "lenke" og "flytt".

dataTransfer.effectAllowed = verdi Returnerer typen operasjoner som skal tillates. Kan stilles inn (under dragstart-hendelsen), for å endre de tillatte operasjonene.

De mulige verdiene er "ingen", "kopier", "copyLink", "copyMove", "link", "linkMove", "move", "all" og "uninitialized",

dataTransfer.items Returnerer et DataTransferItemList-objekt med dragdataene.
dataTransfer.setDragImage (element, x, y) Bruker det gitte elementet for å oppdatere tilbakemeldingene fra drafilen, og erstatte alle tidligere spesifiserte tilbakemeldinger.
dataTransfer.types Returnerer en matrise som viser formatene som ble angitt i dragstart-hendelsen. I tillegg, hvis noen filer blir dratt, vil en av typene være strengen "Files".
data = dataTransfer.getData (format) Returnerer de angitte dataene. Hvis det ikke finnes slike data, returnerer du den tomme strengen.
dataTransfer.setData (format, data) Legger til de spesifiserte dataene.
dataTransfer.clearData (format) Fjerner dataene for de spesifiserte formatene. Fjerner alle data hvis argumentet er utelatt.
dataTransfer.files Returnerer en filliste over eventuelle filer som blir dratt.

Online demonstrasjoner

Flere steder tilbyr fine demonstrasjoner av DnD i aksjon, inkludert bruk av filopplasting som inkluderer HTML5 File API også. Flere lenker til demonstrasjonene er listet nedenfor:

  • HTML5 Dra og slipp filopplasting med lerret - denne demoen er et eksempel på HTML5 dra og slipp med filopplasting og inkluderer muligheten til å endre størrelse, beskjære eller omformatere, eller filtrere det opplastede bildet gjennom HTML5 lerret før du sender det til serveren.
  • Microsoft Test Drive Magnetic Poetry - er et eksempel på et nettsted som bruker HTML5 Dra og slipp for å lage en opplevelse som tidligere hadde trengt et plugin-eller JavaScript-bibliotek.
  • Implementering av HTML5 Drag and Drop Shopping Cart Demo - Denne demoen viser et eksempel på implementering av native drag and drop for å bygge et enkelt handlekurvgrensesnitt.
  • Drag'n Drop - Towers of Hanoi - Utvalgt i Mozilla Developers Network, den bruker DnD API for å implementere det populære klassiske spillet "Towers of Hanoi", sammen med noen få linjer CSS3 for skygger, graderinger, posisjonering og kantlinje radius. Spilldemoen vises i figur C nedenfor:

Figur C

Eksempel på kodebit

Denne kodebiten nedenfor, endret fra Tutorials Point - HTML5 Dra og slipp, demonstrerer et enkelt eksempel på å dra en lilla boks inn i en rosa boks som vist i figur D ('klikk'), figur E ('dra'), og Figur F (dråpen).
 funksjon dragStart (ev) { 
 ev.dataTransfer.effectAllowed = 'bevegelse'; 
 ev.dataTransfer.setData ("Tekst", ev.target.getAttribute ('id')); 
 ev.dataTransfer.setDragImage (ev.target, 0, 0); 
 return true; 
 } 
 funksjon draEnter (ev) { 
 event.preventDefault (); 
 return true; 
 } 
 funksjon dragOver (ev) { 
 return falsk; 
 } 
 funksjon dragDrop (ev) { 
 var src = ev.dataTransfer.getData ("Tekst"); 
 ev.target.appendChild (document.getElementById (src)); 
 ev.stopPropagation (); 
 return falsk; 
 } 
 Forsøk å flytte den lilla boksen inn i den rosa boksen. 
 ondrop = "return dragDrop (event)" 
 ondragover = "return dragOver (event)"> Søppel 
 ondragstart = "return dragStart (event)"> 

Dra meg

Figur D

Figur E

Figur F

Andre ressurser

  • Mozilla Developer Network Drag and Drop - Firefox og andre Mozilla-applikasjoner støtter en rekke funksjoner for å håndtere dra og slipp.
  • Dev.Opera HTML5 Dra og slipp - Beskriver på hvilken måte Opera-nettleseren støtter DnD API.
  • HTML5.1 Nightly Editors Draft - Drag and Drop - Den nattlige oppdateringen av den nyeste HTML5-redaktørens utkast.
  • Android Developers Dra og slipp - Ikke et eksempel på HTML5, men det er Android-dra / slipp-rammeverket som lar brukerne flytte data fra en visning til en annen visning på Android-enheter og nettlesere.

© Copyright 2020 | mobilegn.com