Introduktion
Træk og slip er en almindelig brugerinteraktion, som du kan finde i mange grafiske brugergrænseflader.
Der findes allerede eksisterende JavaScript-biblioteker til at tilføje en træk-og-slip-funktion til din app. Der kan dog være situationer, hvor et bibliotek ikke er tilgængeligt eller introducerer en overhead eller afhængighed, som dit projekt ikke har brug for. I disse situationer kan viden om de APIer, der er tilgængelige for dig i moderne webbrowsere, tilbyde alternative løsninger.
HTML-træk og slip-API er afhængig af DOMs begivenhedsmodel for at få oplysninger om, hvad der trækkes eller droppes, og for at opdatere elementet ved træk eller slip. Med JavaScript-begivenhedshåndterere kan du forvandle ethvert element til et element, der kan trækkes, eller et element, der kan falde i.
I denne vejledning opbygger vi et træk-og-slip-eksempel ved hjælp af HTML-træk og slip API med vanilla JavaScript for at bruge begivenhedshåndtererne.
Forudsætninger
For at gennemføre denne tutorial skal du have:
- En moderne webbrowser, der understøtter træk og slip API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).
Trin 1 – Oprettelse af projektet og indledende markering
Vores projekt vil bestå af en container med to typer underordnede elementer:
- Underordnede elementer, som du kan trække
- Underordnede elementer, der kan få elementer tabt i dem
Først skal du åbne dit terminalvindue og oprette en ny projektmappe:
Gå derefter til den mappe:
Opret derefter en index.html -fil i den mappe:
Tilføj derefter kedelpladekode til en HTML-webside:
Og mellem <body> tags tilføjer dit draggable element og dit dropzone (drop target):
Gem og luk filen. Opret derefter en style.css fil:
Tilføj derefter stilarter for elementerne i vores index.html fil:
Dette tilføjer noget formatering til appen. Nu kan du se index.html i browseren og observere, at dette producerer en draggable <div> og a dropzone <div>.
Dernæst vil vi eksplicit lave den første <div> trækbar ved at tilføje draggable attribut:
Gem og luk filen.
Endelig skal du se index.html i browseren igen. Hvis vi klikker på draggable <div> og trækker det hen over skærmen, skal der være en visuel indikation af, at den bevæger sig.
Standardværdien for attributten draggable er auto. Det betyder, om elementet kan trækkes, bestemmes af din browsers standardadfærd. Typisk betyder dette, at tekstvalg, billeder og links kan trækkes uden at angive draggable="true".
Du har nu en HTML-fil med et trækbart element. Vi går videre til tilføjelse af onevent handlers.
Trin 2 – Håndtering af træk-og-slip-hændelser med JavaScript
I øjeblikket, hvis vi slip musen, mens du trækker det trækkelige element, der sker intet. For at udløse en handling ved træk eller slip på DOM-elementer skal vi bruge Drag and Drop API:
-
ondragstart: Denne begivenhedshåndterer vil blive knyttet til voresdraggable-element og udløse, når endragstart-hændelse opstår. -
ondragover: Denne begivenhedshåndterer vedhæftes voresdropzone-element og udløses, når endragover-hændelse opstår. -
ondrop: Denne begivenhedshåndterer vil også blive knyttet til voresdropzone-element og affyre, når etdropbegivenhed opstår.
Bemærk: Der er i alt otte begivenhedshåndterere: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart og ondrop. For vores eksempel kræver vi ikke dem alle.
Lad os først henvise til en ny https://www.digitalocean.com/community/tutorials/script.js fil i vores index.html:
Opret derefter en ny https://www.digitalocean.com/community/tutorials/script.js fil:
DataTransfer -objektet holder styr på de oplysninger, der er relateret til den aktuelle træk, der sker. For at opdatere vores element ved træk og slip, skal vi direkte få adgang til DataTransfer -objektet.For at gøre dette kan vi vælge egenskaben dataTransfer fra DOM-elementets DragEvent.
Bemærk: DataTransfer objekt kan teknisk spore information for flere elementer, der trækkes på samme tid. For vores eksempel fokuserer vi på at trække et element.
dataTransfer -objektets setData -metode kan bruges til at indstille træktilstandsoplysningerne for dit aktuelt trækkede element. Det tager to parametre:
- en streng, der erklærer formatet for den anden parameter
- de faktiske data, der overføres
Vores mål er at flytte vores draggable -element til et nyt overordnet element. Vi skal være i stand til at vælge vores draggable -element med et unikt id. Vi kan indstille id for det trukkede element med setData -metoden, så det kan bruges senere.
Lad os besøg vores https://www.digitalocean.com/community/tutorials/script.js -fil og opret en ny funktion til at bruge setData:
Bemærk: Internet Explorer 9 til og med 11 har angiveligt problemer med at bruge "text/plain". Formatet skal "text" for den pågældende browser.
For at opdatere det trukkede artikels CSS-styling kan vi få adgang til dets stilarter ved hjælp af DOM-begivenheden igen og ved indstilling af hvilke stilarter, vi vil have til currentTarget.
Lad os tilføje til vores funktion og ændre backgroundColor til yellow:
Bemærk: Alle stilarter, du ændrer, skal opdateres manuelt igen på slip, hvis du vil have kun trækformater. Hvis du ændrer noget, når det begynder at trække, beholder det trukkede element den nye styling, medmindre du ændrer det tilbage.
Nu har vi vores JavaScript-funktion, når trækningen starter.
Vi kan tilføje ondragstart til draggable -elementet i index.html:
Se index.html i din browser. Hvis du prøver at trække dit element nu, bliver den styling, der er erklæret i vores funktion, anvendt:
Der sker dog intet når du slipper dit klik.
Den næste begivenhedshåndterer, der affyres i denne rækkefølge, er ondragover.
Standardfaldsadfærden for visse DOM-elementer som <div> s i browsere accepterer typisk ikke at droppe. Denne adfærd opfanger den adfærd, vi forsøger at implementere. For at sikre, at vi får den ønskede dropadfærd, anvender vi preventDefault.
Lad os besøge https://www.digitalocean.com/community/tutorials/script.js -filen og Opret en ny funktion for at bruge preventDefault. Tilføj denne kode til slutningen af filen:
Nu, vi kan tilføje ondragover til vores dropzone element i index.html:
På dette tidspunkt har vi stadig ikke skrevet kode, der håndterer den faktiske dropping. Den sidste begivenhedshåndterer fyret i denne rækkefølge er ondrop.
Lad os besøge vores https://www.digitalocean.com/community/tutorials/script.js -fil og oprette en ny funktion .
Vi kan henvise til de data, vi har gemt tidligere med dataTransfer -objektets setData -metode. Vi bruger dataTransfer objekts getData metode. De data, vi indstillede, var id, så det er det, der returneres til os:
Vælg vores draggable element med id vi hentede:
Vælg vores dropzone element:
Tilføj vores draggable element til dropzone:
Nulstil vores dataTransfer objekt:
Nu kan vi tilføje ondrop til vores dropzone -element i index.html:
Når det er gjort, har vi en færdig træk-og-slip-funktion. Se index.html i din browser, og træk draggable -elementet til dropzone.
Vores eksempel håndterer scenariet for et enkelt trækbart element og et enkelt drop-mål. Du kan have flere trækbare emner, flere drop-mål og tilpasse det med alle de andre Drag and Drop API-begivenhedshåndterere.
Trin 3 – Opbygning af et avanceret eksempel med flere trækbare emner
Her er endnu et eksempel på, hvordan du kunne bruge denne API: en opgaveliste med trækbare opgaver, som du kan flytte fra en "To-do" kolonne til en "Done" kolonne.
For at oprette din egen opgaveliste skal du tilføje flere trækbare elementer med unikke id s til index.html:
Se index.html i din browser, og træk elementerne i Opgaver-kolonnen til Udført-kolonnen. Du har oprettet en to-do-applikation og testet funktionaliteten.
Konklusion
I denne artikel oprettede du en to-do-app til at udforske den træk-og-slip-funktionalitet, der er tilgængelig for moderne webbrowsere.
Træk og slip API giver flere muligheder for at tilpasse dine handlinger ud over at trække og slippe. For eksempel kan du opdatere CSS-styling af dine trukkede emner. I stedet for at flytte elementet kan du også vælge at kopiere dit trækbare element, så det bliver replikeret ved fald.
Husk, at selvom mange webbrowsere understøtter denne teknologi, er du muligvis ikke i stand til at stole på på det, hvis dit publikum består af enheder, der ikke understøtter denne funktionalitet.
Hvis du vil vide mere om alt, hvad du kan droppe med træk og slip API, skal du tjekke MDNs dokumenter om det.