Bruke HTML5 Drag and Drop API

HTML5 Drag and Drop (DnD) API betyr at vi kan gjøre nesten alle elementer på siden vår drabare. I dette innlegget forklarer vi det grunnleggende om Drag og slipp.

Opprette dragbart innhold #

Det er verdt å merke seg at i de fleste nettlesere kan tekstvalg, bilder og lenker trekkes som standard. For eksempel hvis du drar Google-logoen på Google Søk vil du se spøkelsesbildet. Bildet kan deretter slippes i adressefeltet, et <input type="file" /> -element eller til og med på skrivebordet. For å gjøre andre typer innhold drabart du må bruke HTML5 DnD API-ene.

For å lage et objekt som kan trekkes sett draggable=true på det elementet. Omtrent alt kan dra-aktiveres, bilder, filer , lenker, filer eller hvilken som helst markering på siden din.

I vårt eksempel lager vi et grensesnitt for å omorganisere noen kolonner, som er lagt ut med CSS Grid. Den grunnleggende markeringen for kolonnene mine ser ut som dette, med hver kolonne som har

attributt satt tiltrue.

Her er CSS for container- og bokselementene. Merk at den eneste CSS relatert til DnD-funksjonalitet er cursor: move -egenskapen. Resten av koden kontrollerer bare utformingen og utformingen av beholder- og bokselementene.

På dette punktet vil du finner ut at du kan dra elementene, men ingenting annet vil skje. For å legge til DnD-funksjonaliteten trenger vi for å bruke JavaScript API.

Lytte for å dra hendelser #

Det er et tall av forskjellige hendelser å knytte til for å overvåke hele dra og slipp-prosessen.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

For å håndtere DnD-strømmen trenger du et slags kilderelement (der dra kommer fra), dataen pa yload (det du prøver å slippe), og et mål (et område for å fange slipp). Kildeelementet kan være et bilde, liste, lenke, filobjekt, HTML-blokk osv. Målet er slippsonen (eller sett med slippsoner) som godtar dataene brukeren prøver å slippe. Husk at ikke alle elementene kan være mål, for eksempel kan et bilde ikke være et mål.

Start og slutt en dra og slipp-sekvens #

Når du har definert draggable="true" attributter i innholdet ditt, legg til en dragstart hendelsesbehandler for å starte DnD-sekvensen for hver kolonne.

Denne koden vil sette kolonnens opasitet til 40% når brukeren begynner å dra den, og deretter returnere den til 100% når drahendelsen avsluttes.

Resultatet kan sees i Glitch-demoen nedenfor. Dra et element og det blir ugjennomsiktig. Da dragstart -hendelsens mål er kildeelementet, setter du this.style.opacity til 40% til brukeren visuell tilbakemelding om at elementet er det gjeldende valget som flyttes. Når du slipper elementet, selv om slippfunksjonaliteten ikke er på plass, returnerer kildeelementet til 100% opacity.

Legg til flere visuelle signaler med dragenter, dragover og dragleave

For å hjelpe brukeren til å forstå hvordan de kan samhandle med grensesnittet ditt, bruk dragenter, dragover og dragleave hendelsesbehandlere. I dette eksemplet er kolonnene slippmål i tillegg til å være drabare. Hjelp brukeren for å forstå dette ved å gjøre grensen dashet når de holder et dratt element over en kolonne. For eksempel kan du i CSS opprette en over -klasse for å representere elementer som er slippmål:

Så, i din J avaScript konfigurerer hendelsesbehandlerne, legg til over klassen når kolonnen dras over, og fjern den når vi forlater. I dragend handler sørger vi også for å fjerne klassene på slutten av dra.

Det er et par poeng som er verdt å dekke i denne koden. :

• Hvis du drar noe som en lenke, må du forhindre nettleserens standardadferd, som er å navigere til den lenken. For å gjøre dette, ring e.preventDefault() i dragover hendelsen. En annen god praksis er å returnere false i den samme behandleren.
• dragenter hendelsesbehandler brukes til å veksle over -klassen i stedet for dragover .Hvis du bruker dragover, vil CSS-klassen bli byttet mange ganger da hendelsen dragover fortsatte å skyte på en kolonnesvev. som ville føre til at nettleserens gjengir for å gjøre en stor mengde unødvendig arbeid. Det er alltid en god ide å holde omtegninger til et minimum.Hvis du trenger å bruke dragover -hendelsen til noe, bør du vurdere å strupe eller avvise lytteren til hendelsen.

Fullfør slipp #

For å behandle selve slippingen, legg til en hendelseslytter for drop hendelsen. I drop -behandleren må du forhindre nettleserens standard oppførsel for drops, som vanligvis er en slags irriterende viderekobling. Du kan forhindre at hendelsen spruter opp DOM ved å ringe e.stopPropagation().

Hvis du kjører koden på dette punktet, vil ikke elementet falle til det nye stedet. For å oppnå dette må du bruke DataTransfer objekt.

dataTransfer -egenskapen er der all DnD-magien skjer. Den inneholder dataen som sendes i en drahandling. dataTransfer er satt i dragstart hendelsen og leses / håndteres i slipphendelsen. Å ringe e.dataTransfer.setData(mimeType, dataPayload) lar deg angi objektet «s MIME-type og data nyttelast.

I dette eksemplet vil vi tillate brukere å omorganisere rekkefølgen på kolonnene. For å gjøre det, må du først lagre kildeelementets HTML når du drar starter:

I drop hendelsen du behandler kolonnefallet, sett kildekolonnens HTML til HTML-en for målkolonnen du falt på, og kontroller først at brukeren ikke slipper tilbake til den samme kolonnen de dro fra.

Du kan se resultatet i følgende demonstrasjon. dra og slipp A-kolonnen på toppen av B-kolonnen og legg merke til hvordan de bytter plass:

Mer draegenskaper #

dataTransfer -objektet eksponerer egenskaper for å gi visuell tilbakemelding til brukeren under dra-prosessen. Disse egenskapene kan også brukes til å kontrollere hvordan hvert slippmål svarer på en bestemt datatype.

• dataTransfer.effectAllowed ts hvilken «type dra» brukeren kan utføre på elementet. Det brukes i dra-og-slipp-behandlingsmodellen for å initialisere dropEffect under dragenter og dragover hendelser. Egenskapen kan settes til følgende verdier: none, copy, copyLink, copyMove, link, linkMove, move, all, og uninitialized.
• dataTransfer.dropEffect styrer tilbakemeldingen som brukeren får under dragenter og dragover hendelser. Når brukeren svever over et målelement, vil nettleserens markør indikere hvilken type operasjon som skal foregå (f.eks. en kopi, et trekk osv.). Effekten kan få en av følgende verdier: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) betyr at i stedet for å bruke nettleseren » s standard tilbakemelding om «spøkelsesbilde», kan du eventuelt angi et draikon.

Filopplasting med dra og slipp #

Dette enkle eksemplet bruker en kolonne som både dra kilde og dra mål. Dette kan sees i et brukergrensesnitt der brukeren blir bedt om å omorganisere elementene. I noen situasjoner kan dra målet og kilden være forskjellige, for eksempel et grensesnitt der brukeren trenger å velge ett bilde for å være hovedbilde for et produkt ved å dra det valgte bildet til et mål.

Dra og slipp brukes ofte for å tillate brukere å dra elementer fra skrivebordet til et program. Hovedforskjellen er i drop handler.I stedet for å bruke dataTransfer.getData() for å få tilgang til filene, vil dataene deres Du vil være inneholdt i egenskapen dataTransfer.files:

Du finner mer informasjon om dette i Tilpasset dra og slipp.