Innledning
Dra og slipp er en vanlig brukerinteraksjon som du kan finne i mange grafiske brukergrensesnitt.
Det finnes eksisterende JavaScript-biblioteker for å legge til en dra og slipp-funksjon i appen din. Imidlertid kan det være situasjoner der et bibliotek ikke er tilgjengelig eller introduserer en overhead eller avhengighet som prosjektet ditt ikke trenger. I disse situasjonene kan kunnskap om API-ene som er tilgjengelige for deg i moderne nettlesere tilby alternative løsninger.
HTML Drag and Drop API er avhengig av DOMs hendelsesmodell for å få informasjon om hva som blir dratt eller sluppet og for å oppdatere elementet ved å dra eller slippe det. Med JavaScript-hendelsesbehandlere kan du gjøre ethvert element om til et drabart element eller et element som kan slippes ned i.
I denne opplæringen vil vi bygge et dra-og-slipp-eksempel ved hjelp av HTML-dra og slipp API med vanilje JavaScript for å bruke hendelsesbehandlerne.
Forutsetninger
For å fullføre denne opplæringen trenger du:
- En moderne nettleser som støtter Drag and Drop API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).
Trinn 1 – Opprette prosjektet og første markering
Prosjektet vårt vil bestå av en beholder med to typer underordnede elementer:
- Underordnede elementer som du kan dra
- Underordnede elementer som kan ha elementer falt i seg
Først åpner du terminalvinduet og oppretter en ny prosjektkatalog:
Neste, naviger til den katalogen:
Opprett deretter en index.html -fil i den katalogen:
Deretter legger du til kjeleplatekode for en HTML-webside:
Og mellom <body> -koder legger til draggable -elementet og dropzone (slippmål):
Lagre og lukk filen. Opprett deretter en style.css -fil:
Deretter legger du til stiler for elementene i index.html fil:
Dette vil legge til litt formatering i appen. Nå kan du se index.html i nettleseren og observere at dette gir en draggable <div> og a dropzone <div>.
Deretter vil vi eksplisitt lage den første <div> dragbar ved å legge til draggable attributtet:
Lagre og lukk filen.
Til slutt kan du se index.html i nettleseren igjen. Hvis vi klikker på draggable <div> og drar den over skjermen, bør det være en visuell indikasjon på at den beveger seg.
Standardverdien for draggable -attributtet er auto. Det betyr om elementet kan dras, vil bli bestemt av nettleserens standardoppførsel. Vanligvis betyr dette at tekstvalg, bilder og lenker kan dras uten å spesifisere draggable="true".
Du har nå en HTML-fil med et dragbart element. Vi går videre til å legge til onevent håndterere.
Trinn 2 – Håndtering av dra-og-slipp-hendelser med JavaScript
For øyeblikket, hvis vi slipp musen mens du drar det drabare elementet, ingenting skjer. For å utløse en handling på dra eller slipp på DOM-elementer, må vi bruke Drag and Drop API:
-
ondragstart: Denne hendelsesbehandleren vil bli festet tildraggable-elementet og brann når endragstarthendelse oppstår. -
ondragover: Denne hendelsesbehandleren blir festet tildropzone-elementet og utløses når endragover-hendelse oppstår. -
ondrop: Denne hendelsesbehandleren blir også festet tildropzone-elementet og brenner når etdrophendelse skjer.
Merk: Det er totalt åtte hendelsesbehandlere: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, og ondrop. For eksempel vil vi ikke kreve dem alle.
La oss først referere til en ny https://www.digitalocean.com/community/tutorials/script.js -fil i index.html:
Deretter oppretter du en ny https://www.digitalocean.com/community/tutorials/script.js fil:
DataTransfer -objektet vil holde oversikt over informasjonen som er relatert til gjeldende dra. For å oppdatere elementet vårt ved å dra og slippe, må vi få direkte tilgang til DataTransfer -objektet.For å gjøre dette kan vi velge dataTransfer -egenskapen fra DOM-elementets DragEvent.
Merk: DataTransfer objekt kan teknisk spore informasjon for at flere elementer blir dratt samtidig. For eksempel vil vi fokusere på å dra ett element.
dataTransfer -objektets setData -metode kan brukes til å angi informasjon om dragtilstanden for det elementet du drar for øyeblikket. Det tar to parametere:
- en streng som erklærer formatet til den andre parameteren
- de faktiske dataene som overføres
Vårt mål er å flytte draggable -elementet til et nytt overordnet element. Vi må kunne velge draggable -elementet med et unikt id. Vi kan stille inn id for det drage elementet med setData -metoden, slik at den kan brukes senere.
La oss besøk vår https://www.digitalocean.com/community/tutorials/script.js -fil og opprett en ny funksjon for å bruke setData:
Merk: Internet Explorer 9 til og med 11 har angivelig problemer med å bruke "text/plain". Formatet må "text" for den nettleseren.
For å oppdatere CSS-stilen til det objektet som er dratt, kan vi få tilgang til stilene ved hjelp av DOM-hendelsen igjen og ved angi hvilke stiler vi vil ha for currentTarget.
La oss legge til i vår funksjon og endre backgroundColor til yellow:
Merk: Alle stiler du endrer må oppdateres manuelt igjen på drop hvis du vil ha bare stiler. Hvis du endrer noe når det begynner å dra, beholder elementet den nye stilen med mindre du endrer den tilbake.
Nå har vi JavaScript-funksjonen vår for når dra starter.
Vi kan legge til ondragstart til draggable -elementet i index.html:
Vis index.html i nettleseren din. Hvis du prøver å dra varen din nå, blir stylingen som er erklært i funksjonen vår brukt:
Imidlertid vil ingenting skje når du slipper klikket.
Neste hendelsesbehandler som utløses i denne sekvensen er ondragover.
Standard falladferd for visse DOM-elementer som <div> i nettlesere godtar vanligvis ikke slipp. Denne oppførselen vil fange opp atferden vi prøver å implementere. For å sikre at vi får den ønskede slippeatferden, vil vi bruke preventDefault.
La oss se på https://www.digitalocean.com/community/tutorials/script.js -filen og opprett en ny funksjon for å bruke preventDefault. Legg til denne koden på slutten av filen:
Nå, vi kan legge til ondragover til dropzone -elementet i index.html:
På dette punktet har vi fremdeles ikke skrevet kode som håndterer selve slippingen. Den siste hendelsesbehandleren som er avfyrt i denne sekvensen er ondrop.
La oss se på nytt https://www.digitalocean.com/community/tutorials/script.js -filen og lage en ny funksjon .
Vi kan referere til dataene vi lagret tidligere med dataTransfer -objektets setData -metode. Vi vil bruke dataTransfer objektets getData -metoden. Dataene vi satte var id, så det er det som blir returnert til oss:
Velg draggable -elementet med id vi hentet:
Velg dropzone element:
Legg til draggable element til dropzone:
Tilbakestill dataTransfer -objektet:
Nå kan vi legge til ondrop til dropzone -elementet i index.html:
Når det er gjort, har vi en fullført dra-og-slipp-funksjon. Se index.html i nettleseren din og dra draggable -elementet til dropzone.
Eksemplet vårt håndterer scenariet for et enkelt dragbart element og et enkelt slippmål. Du kan ha flere drabare elementer, flere slippmål og tilpasse det med alle de andre Drag and Drop API-hendelsesbehandlerne.
Trinn 3 – Bygg et avansert eksempel med flere drabare elementer
Her er et eksempel på hvordan du kan bruke denne API: en oppgaveliste med drabare oppgaver du kan flytte fra en "To-do" -kolonne til en "Done" -kolonne.
For å lage din egen oppgaveliste, legg til flere drabare elementer med unike id s til index.html:
Vis index.html i og dra elementene i oppgavekolonnen til utført-kolonnen. Du har opprettet et oppgaveapplikasjon og testet funksjonaliteten.
Konklusjon
I denne artikkelen opprettet du en oppgaveapp for å utforske dra-og-slipp-funksjonaliteten som er tilgjengelig for moderne nettlesere.
Drag and Drop API gir flere alternativer for å tilpasse handlingene dine utover å dra og slippe. For eksempel kan du oppdatere CSS-stilen for de dragte elementene dine. I stedet for å flytte elementet, kan du også velge å kopiere det drabare elementet slik at det blir replikert ved slipp.
Husk at selv om mange nettlesere støtter denne teknologien, kan det hende du ikke kan stole på på den hvis publikum består av enheter som ikke støtter denne funksjonaliteten.
Hvis du vil lære mer om alt du kan slippe med Dra og slipp-API, kan du sjekke ut MDNs dokumenter på den.