HTML5 drag-and-drop (DnD) API'en betyder, at næsten ethvert element på en side kan blive trækkeligt. I denne artikel gennemgår vi det grundlæggende om drag and drop.
Skab indhold, der kan trækkes
Det er værd at bemærke, at i de fleste browsere kan tekstvalg, billeder og links som standard trækkes. For eksempel, hvis du trækker Google-logoet i Google Søgning, vil du se et spøgelsesbillede. Billedet kan derefter trækkes og slippes ind i adresselinjen, <inputtype="file" /> element, eller endda på skrivebordet. For at gøre andre typer indhold trækkelige, skal du bruge HTML5 DnD API'en.
For at gøre et objekt trækkebart, sæt elementetdraggable=sand。 Trækning kan understøttes for næsten ethvert element, inklusive billeder, filer, links, filer eller enhver markering på en side.
I vores eksempel vil vi lave en grænseflade til at omarrangere nogle kolonner, som er lagt ud via CSS Grid. Den grundlæggende markup for disse kolonner vises nedenfor, hvor trækbar-egenskaben sættes til sand for hver kolonne.
Her er CSS'en for mine container- og box-elementer. Bemærk, at den eneste CSS-funktionalitet relateret til DnD-funktionalitet er cursor: move-egenskaben. Resten af koden styrer kun layoutet og stilen af container- og box-elementerne.
På dette tidspunkt vil du se, at du kan trække genstanden, men der sker ikke mere. For at tilføje DnD-funktionalitet skal vi bruge JavaScript API'en.
Lyt efter drag-events
Mange forskellige begivenheder kan tilknyttes for at overvåge hele træk-og-slip-processen.
- Dragstart
- trække
- Dragenter
- dragleave
- Dragover
- dråbe
- dragend
For at behandle en DnD-strøm skal du bruge en form for kildeelement (startpunktet for træk), datapayloaden (det, du prøver at placere), og målet (området hvor snap-placeringen er). Kildeelementer kan være billeder, lister, links, filobjekter, HTML-blokke osv. Målet er at acceptere dropzonen (eller sættet af dropzoner) af de data, som brugeren forsøger at placere. Husk, at ikke alle elementer kan være mål, for eksempel kan billeder ikke være mål.
Start og afslut træk-og-slip-sekvensen
Efter at have defineret draggable="true"-egenskaben på indholdet, vedhæft en dragstart-hændelseshandler for at starte DnD-sekvensen for hver kolonne.
Denne kode sætter kolonnens opacitet til 40 %, når brugeren begynder at trække, og derefter nulstiller den til 100 % ved slutningen af træk-begivenheden.
Resultaterne kan ses i Glitch-demoen nedenfor. Træk et objekt, og det bliver uigennemsigtigt. Da dragstart-begivenheden retter sig mod kildeelementet, giver det brugeren visuel feedback at sætte this.style.opacity til 40% om, at det aktuelt valgte element bevæger sig. Efter at elementet er placeret, går kildeelementet tilbage til 100% opacitet, selvom placeringsfunktionen endnu ikke er skrevet.
Brug dragenter, dragover og dragleave for at tilføje ekstra visuelle signaler
For at hjælpe brugere med at forstå, hvordan man interagerer med din grænseflade, brug dragenter, dragover og dragleave event handlers. I det følgende eksempel kan kolonnerne trækkes eller målrettes. For at hjælpe brugerne med at forstå dette, når brugeren trækker et element forbi en kolonne, bliver kanten af den kolonne til en stiplet linje. For eksempel kan du oprette en overklasse i CSS for at repræsentere et element, der er et placeringsmål:
Opsæt derefter en event handler i JavaScript til at tilføje overklassen, når man trækker forbi en kolonne, og fjerne den, når man forlader den. I dragend-handleren vil vi også sikre, at klassen fjernes ved slutningen af draget.
Der er et par punkter at nævne i denne kode:
Når du trækker et element som et link, skal du blokere browserens standardadfærd, som er at navigere til det link. For at gøre dette skal du kalde e.preventDefault() i dragover-begivenheden. En anden god praksis er at returnere false i samme handler.
Brug dragenter-eventhåndtereren til at skifte klasser, ikke dragover. Hvis du bruger dragover, bliver CSS-klassen slået til og til flere gange, fordi event dragover bliver ved med at udløses, når kolonnen svæver. Til sidst vil dette få browserens renderer til at udføre en masse unødvendigt arbejde. Det er bedst altid at holde gentegningen på et minimum. Hvis du af en eller anden grund skal bruge dragover-events, så overvej at begrænse eller fjerne event-lyttere.
Afslut placeringen
For at håndtere selve placeringen, tilføj en event listener til drop-eventet. I en drop handler skal du blokere browserens standardplaceringsadfærd, som normalt er en eller anden irriterende omdirigering. e.stopPropagation() kan kaldes for at forhindre, at hændelsen udløser DOM'en.
Sørg for at registrere den nye handler hos den anden handler:
Hvis du kører koden på dette tidspunkt, vil projektet ikke blive placeret et nyt sted. For at opnå dette skal du bruge et DataTransfer-objekt.
DataTransfer-egenskaben er stedet, hvor alle DnD-underlighederne sker. Den gemmer de datafragmenter, der sendes i trækoperationen. dataTransfer sættes i dragstart-begivenheden og læses/behandles i drop-begivenheden. Kald e.dataTransfer.setData(mimeType, dataPayload) for at indstille MIME-typen og datapayloaden for objektet.
I det følgende eksempel vil vi lade brugerne omarrangere rækkefølgen af kolonnerne. For at gøre dette skal du først gemme HTML'en for kildeelementet i begyndelsen af trækket:
Håndter kolonneplacering i drop-eventen, sæt HTML for kildekolonnen til HTML'en for målkolonnen, hvor den er placeret, og tjek først, at målkolonnen, som brugeren trækker og slipper, er den samme som kildekolonnen.
Flere modstandsegenskaber
DataTransfer-objektet eksponerer egenskaber, der bruges til at give visuel feedback til brugeren under trækprocessen. Disse egenskaber kan også bruges til at kontrollere, hvordan hvert placeringsmål reagerer på specifikke datatyper.
- dataTransfer.effectAllowed begrænser den "type træk", en bruger kan udføre på et element. Den bruges i drag-and-drop håndteringsmodellen til at initialisere dropEffect under dragenter- og dragover-begivenheder. Denne egenskab kan sættes til følgende værdier: ingen, kopi, kopiLink, kopiFlyt, link, linkFlytt, flyt, alle og uinitialiseret.
- dataTransfer.dropEffect styrer den feedback, der gives til brugeren under dragenter- og dragover-begivenheder. Når brugeren holder musen over målelementet, vil browserens markør angive, hvilken type handling der skal udføres (f.eks. kopier, flyt osv.). Effekten kan være en af følgende værdier: ingen, kopi, link, flyt.
- e.dataTransfer.setDragImage(imgElement, x, y) angiver, at browserens standard "spøgelsesbillede"-feedback ikke bruges, og i stedet er der en mulighed for at sætte træk-ikonet.
Upload filer ved at trække og slippe
Følgende simple eksempel bruger en kolonne som trækkilde og dragmål. Dette kan ses i brugerfladen, når brugeren bliver bedt om at omarrangere elementerne. I nogle tilfælde kan det være forskelligt at trække målet og kilden, for eksempel i en grænseflade hvor brugeren skal vælge et billede som produktets hovedbillede ved at trække det valgte billede over på målet.
Træk og slip bruges ofte til at lade brugere trække elementer fra skrivebordet ind i appen. Den største forskel er drop-håndtereren. Uden at bruge dataTransfer.getData() til at tilgå filen, vil filens data blive inkluderet i dataTransfer.files-egenskaben:
Originalt link:Hyperlink-login er synlig.
|
Opslået den 26-4-2022 10:30:50
|
|
|
|
Opslået den 26-4-2022 21:27:25
|
