HTML5 drag-och-släpp (DnD) API innebär att nästan vilket element som helst på en sida kan bli dragbart. I den här artikeln kommer vi att gå igenom grunderna i drag och släpp.
Skapa innehåll som går att dra ut på
Det är värt att notera att i de flesta webbläsare är textval, bilder och länkar som standard dragbara. Till exempel, om du drar Googles logotyp i Google Sök, kommer du att se en spökbild. Bilden kan sedan dras och släppas in i adressfältet, <input type="file" /> element, eller till och med på skrivbordet. För att göra andra typer av innehåll dragbart behöver du använda HTML5 DnD API.
För att göra ett objekt dragbart, ställ in elementetdraggable=sant。 Dragning kan stödjas för nästan vilket element som helst, inklusive bilder, filer, länkar, filer eller vilken markering som helst på en sida.
I vårt exempel skapar vi ett gränssnitt för att omarrangera några kolumner, som har lagts ut via CSS Grid. Den grundläggande markeringen för dessa kolumner visas nedan, med draggable-egenskapen satt till sann för varje kolumn.
Här är CSS:en för mina container- och boxelement. Observera att den enda CSS-funktionaliteten som är relaterad till DnD är egenskapen cursor: move. Resten av koden styr endast layouten och stilen på container- och boxelementen.
Vid det här laget kommer du att se att du kan dra föremålet men inget mer händer. För att lägga till DnD-funktionalitet behöver vi använda JavaScript-API:et.
Lyssna efter drag-evenemang
Många olika händelser kan kopplas till för att övervaka hela dra-och-släpp-processen.
- Dragstart
- dra
- Dragenter
- dragleave
- Dragover
- droppe
- Dragend
För att bearbeta en DnD-ström behöver du någon form av källelement (startpunkten för draget), datapayloaden (det du försöker placera) och målet (området där snap-placeringen är placerad). Källelement kan vara bilder, listor, länkar, filobjekt, HTML-block, etc. Målet är att acceptera droppzonen (eller uppsättningen av droppzoner) av den data som användaren försöker placera. Tänk på att inte alla element kan vara mål, till exempel kan bilder inte vara mål.
Börja och avsluta dra-och-släpp-sekvensen
Efter att ha definierat draggable="true"-egenskapen på innehållet, bifoga en dragstart-händelsehanterare för att starta DnD-sekvensen för varje kolumn.
Denna kod sätter kolumnens opacitet till 40 % när användaren börjar dra, och återställer sedan till 100 % i slutet av drag-händelsen.
Resultaten kan ses i Glitch-demot nedan. Dra ett föremål och det blir ogenomskinligt. Eftersom dragstart-händelsen riktar sig mot källelementet, ger inställningen av this.style.opacity till 40 % användaren visuell återkoppling om att det nuvarande valda elementet rör sig. Efter att objektet placerats återgår källelementet till 100 % opacitet, även om placeringsfunktionen ännu inte har skrivits.
Använd dragenter, dragover och dragleave för att lägga till fler visuella ledtrådar
För att hjälpa användare att förstå hur man interagerar med ditt gränssnitt, använd dragenter, dragover och dragleave händelsehanterare. I följande exempel kan kolumnerna dras eller riktas mot målet. För att hjälpa användare att förstå detta, när användaren drar ett objekt förbi en kolumn, blir kolumnens kant en streckad linje. Till exempel kan du skapa en överklass i CSS för att representera ett element som är ett placeringsmål:
Sätt sedan upp en händelsehanterare i JavaScript för att lägga till överklassen när man drar förbi en kolumn och ta bort den när man lämnar den. I dragend-hanteraren vill vi också se till att klassen tas bort i slutet av draget.
Det finns några punkter att nämna i denna kod:
När du drar ett element som en länk måste du blockera webbläsarens standardbeteende, vilket är att navigera till den länken. För att göra detta, anropa e.preventDefault() i dragover-eventet. En annan bra praxis är att returnera false i samma handler.
Använd dragenter-händelsehanteraren för att byta klasser, inte dragover. Om du använder dragover slås CSS-klassen flera gånger eftersom event dragover fortsätter att triggas när kolumnen hovrar. Så småningom kommer detta att göra att webbläsarens renderare gör mycket onödigt arbete. Det är bäst att alltid hålla omritningen till ett minimum. Om du av någon anledning behöver använda dragover-händelser, överväg att begränsa eller ta bort händelselyssnare.
Avsluta placeringen
För att hantera själva placeringen, lägg till en händelse-lyssnare för dropp-händelsen. I en drop handler behöver du blockera webbläsarens standardplaceringsbeteende, vilket oftast är någon form av irriterande omdirigering. e.stopPropagation() kan anropas för att förhindra att händelsen utlöser DOM:en.
Se till att registrera den nya handledaren i den andra hanteraren:
Om du kör koden just nu kommer projektet inte att placeras på en ny plats. För att uppnå detta behöver du använda ett DataTransfer-objekt.
DataTransfer-egenskapen är där alla DnD-underverk händer. Den sparar datafragmenten som skickas i dragoperationen. dataTransfer ställs in i dragstart-eventet och läses/bearbetas i drop-eventet. Anropa e.dataTransfer.setData(mimeType, dataPayload) för att ställa in MIME-typen och datapayload för objektet.
I följande exempel kommer vi att låta användare omarrangera kolumnernas ordning. För att göra detta behöver du först lagra HTML:en för källelementet i början av draget:
Hantera kolumnplacering i drop-eventet, sätt HTML:n för källkolumnen till HTML:n för målkolumnen där den placeras, kontrollera först att målkolumnen som användaren drar och släpper är densamma som källkolumnen.
Fler dragegenskaper
DataTransfer-objektet exponerar egenskaper som används för att ge visuell återkoppling till användaren under dragningsprocessen. Dessa egenskaper kan också användas för att styra hur varje placeringsmål svarar på specifika datatyper.
- dataTransfer.effectAllowed begränsar den "typ av drag" en användare kan utföra på ett element. Den används i dra-och-släpp-hanteringsmodellen för att initialisera dropEffect under dragenter- och dragover-händelser. Denna egenskap kan sättas till följande värden: none, copy, copyLink, copyMove, link, linkMove, move, all och uninitialized.
- dataTransfer.dropEffect styr den feedback som ges till användaren under dragenter- och dragover-händelser. När användaren håller muspekaren över målelementet visar webbläsarens markör vilken typ av åtgärd som ska utföras (t.ex. kopiera, flytta, etc.). Effekten kan vara ett av följande värden: ingen, kopiera, länka, flytta.
- e.dataTransfer.setDragImage(imgElement, x, y) indikerar att webbläsarens standardfeedback om "spökbild" inte används, och istället finns ett alternativ för att ställa in dragikonen.
Ladda upp filer genom att dra och släppa
Följande enkla exempel använder en kolumn som dragkälla och dragmål. Detta kan synas i användargränssnittet när användaren ombeds omorganisera föremålen. I vissa fall kan det vara olika att dra målet och källan, till exempel i ett gränssnitt där användaren måste välja en bild som produktens huvudbild genom att dra den valda bilden till målet.
Dra och släpp används ofta för att låta användare dra objekt från skrivbordet till appen. Den största skillnaden är dropphanteraren. Utan att använda dataTransfer.getData() för att komma åt filen, kommer filens data att inkluderas i egenskapen dataTransfer.files:
Originallänk:Inloggningen med hyperlänken är synlig.
|
Publicerad den 2022-4-26 10:30:50
|
|
|
|
Publicerad den 2022-4-26 21:27:25
|
