HTML5 dra-og-slipp (DnD) API-et betyr at nesten hvilket som helst element på en side kan bli drabart. I denne artikkelen skal vi dekke det grunnleggende om dra og slipp.
Lag innhold som kan dras
Det er verdt å merke seg at i de fleste nettlesere kan tekstvalg, bilder og lenker dras som standard. For eksempel, hvis du drar Google-logoen i Google Søk, vil du se et spøkelsesbilde. Bildet kan deretter dras og slippes inn i adresselinjen, <inputtype="file" /> element, eller til og med på skrivebordet. For å gjøre andre typer innhold dragbart, må du bruke HTML5 DnD API.
For å gjøre et objekt drabart, sett elementetdraggable=true。 Draing kan støttes for nesten alle elementer, inkludert bilder, filer, lenker, filer eller hvilken som helst markering på en side.
I vårt eksempel lager vi et grensesnitt for å omorganisere noen kolonner, som er lagt ut via CSS Grid. Den grunnleggende markupen for disse kolonnene vises nedenfor, med draggable-egenskapen satt til sann for hver kolonne.
Her er CSS-en for elementene i containeren og boksen min. Merk at den eneste CSS-funksjonen relatert til DnD er cursor: move-egenskapen. Resten av koden styrer kun oppsettet og stilen til container- og bokselementene.
På dette tidspunktet vil du se at du kan dra gjenstanden, men ingenting annet vil skje. For å legge til DnD-funksjonalitet må vi bruke JavaScript-API-et.
Lytt etter drag-arrangementer
Mange forskjellige hendelser kan kobles til for å overvåke hele dra-og-slipp-prosessen.
- Dragstart
- dra
- Dragenter
- dragleave
- Dragover
- dråpe
- Dragend
For å behandle en DnD-strøm trenger du en slags kildeelement (startpunktet for draget), datalasten (det du prøver å plassere), og målet (området der snap-plasseringen er). Kildeelementer kan være bilder, lister, lenker, filobjekter, HTML-blokker, osv. Målet er å akseptere drop-sonen (eller settet med drop-soner) av dataene brukeren prøver å plassere. Husk at ikke alle elementer kan være mål, for eksempel kan ikke bilder være mål.
Start og avslutt dra-og-slipp-sekvensen
Etter å ha definert draggable="true"-egenskapen på innholdet, legg ved en dragstart-hendelseshandler for å starte DnD-sekvensen for hver kolonne.
Denne koden vil sette opasiteten til kolonnen til 40 % når brukeren begynner å dra, og deretter reversere den til 100 % ved slutten av drag-hendelsen.
Resultatene kan sees i Glitch-demoen nedenfor. Dra en gjenstand, og den blir ugjennomsiktig. Siden dragstart-hendelsen retter seg mot kildeelementet, gir det å sette this.style.opacity til 40 % brukeren visuell tilbakemelding om at det valgte elementet beveger seg. Etter at elementet er plassert, går kildeelementet tilbake til 100 % opasitet, selv om plasseringsfunksjonen ennå ikke er skrevet.
Bruk dragenter, dragover og dragleave for å legge til flere visuelle hint
For å hjelpe brukere å forstå hvordan de kan samhandle med grensesnittet ditt, bruk dragenter-, dragover- og dragleave-hendelseshåndterere. I det følgende eksempelet kan kolonnene dras eller målrettes. For å hjelpe brukerne å forstå dette, når brukeren drar et element forbi en kolonne, blir kanten av den kolonnen en stiplet linje. For eksempel kan du lage en overklasse i CSS for å representere et element som er et plasseringsmål:
Sett deretter opp en hendelsesbehandler i JavaScript for å legge til overklassen når man drar forbi en kolonne og fjerne den når man forlater. I dragend-handleren vil vi også sørge for at klassen fjernes på slutten av draget.
Det er noen punkter å nevne i denne koden:
Når du drar et element som en lenke, må du blokkere nettleserens standardoppførsel, som er å navigere til den lenken. For å gjøre dette, kall e.preventDefault() i dragover-hendelsen. En annen god praksis er å returnere false i samme handler.
Bruk dragenter-hendelseshandleren for å bytte over klasser, ikke dragover. Hvis du bruker dragover, blir CSS-klassen byttet flere ganger fordi hendelsesdragover fortsetter å utløses når kolonnen svover. Til slutt vil dette føre til at nettleserens renderer gjør mye unødvendig arbeid. Det er best å alltid holde omtegningen til et minimum. Hvis du av en eller annen grunn må bruke dragover-hendelser, vurder å begrense eller fjerne hendelseslyttere.
Fullfør plasseringen
For å håndtere selve plasseringen, legg til en hendelseslytter for drop-hendelsen. I en drophandler må du blokkere nettleserens standard plasseringsoppførsel, som vanligvis er en slags irriterende omdirigering. e.stopPropagation() kan kalles for å forhindre at hendelsen utløser DOM-en.
Sørg for å registrere den nye handleren i den andre handleren:
Hvis du kjører koden nå, vil ikke prosjektet bli plassert på et nytt sted. For å oppnå dette må du bruke et DataTransfer-objekt.
DataTransfer-egenskapen er der alle DnD-underverkene skjer. Den lagrer datafragmentene som sendes i dragoperasjonen. dataTransfer settes i dragstart-hendelsen og leses/behandles i drop-hendelsen. Kall e.dataTransfer.setData(mimeType, dataPayload) for å sette MIME-typen og datapayloaden til objektet.
I det følgende eksempelet lar vi brukerne omorganisere rekkefølgen på kolonnene. For å gjøre dette må du først lagre HTML-koden til kildeelementet i starten av draget:
Håndter kolonneplassering i slipp-hendelsen, sett HTML-koden til kildekolonnen til HTML-en til målkolonnen der den er plassert, og sjekk først at målkolonnen som dras og slippes av brukeren er den samme som kildekolonnen.
Flere dragegenskaper
DataTransfer-objektet eksponerer egenskaper som brukes for å gi visuell tilbakemelding til brukeren under drageprosessen. Disse egenskapene kan også brukes til å kontrollere hvordan hvert plasseringsmål responderer på spesifikke datatyper.
- dataTransfer.effectAllowed begrenser "typen drag" en bruker kan utføre på et element. Den brukes i dra-og-slipp-håndteringsmodellen for å initialisere dropEffect under dragenter- og dragover-hendelser. Denne egenskapen kan settes til følgende verdier: none, copy, copyLink, copyLink, copyMove, link, linkMove, move, all og uninitialized.
- dataTransfer.dropEffect kontrollerer tilbakemeldingen som gis til brukeren under dragenter- og dragover-hendelser. Når brukeren holder musepekeren over målelementet, vil nettleserens markør indikere hvilken type handling som skal utføres (f.eks. kopiere, flytte, osv.). Effekten kan være en av følgende verdier: ingen, kopier, lenke, flytte.
- e.dataTransfer.setDragImage(imgElement, x, y) indikerer at nettleserens standard "spøkelsesbilde"-tilbakemelding ikke brukes, og at det i stedet finnes et alternativ for å sette dra-ikonet.
Last opp filer ved å dra og slippe
Følgende enkle eksempel bruker en kolonne som dragkilde og dragmål. Dette kan sees i brukergrensesnittet når brukeren blir bedt om å omorganisere elementene. I noen tilfeller kan det være forskjellig å dra målet og kilden, for eksempel i et grensesnitt hvor brukeren må velge et bilde som hovedbilde i produktet ved å dra det valgte bildet over på målet.
Dra og slipp brukes ofte for å la brukere dra elementer fra skrivebordet inn i appen. Hovedforskjellen er dropphåndtereren. Uten å bruke dataTransfer.getData() for å få tilgang til filen, vil filens data bli inkludert i dataTransfer.files-egenskapen:
Original lenke:Innloggingen med hyperkoblingen er synlig.
|
Publisert 26.04.2022 kl. 10:30:50
|
|
|
|
Publisert 26.04.2022 kl. 21:27:25
|
