Använda HTML5 Drag and Drop API

HTML5 Drag and Drop (DnD) API innebär att vi kan göra nästan alla element på vår sida dragbara. I det här inlägget kommer vi att förklara grunderna för Drag och släpp.

Skapa dragbart innehåll #

Det är värt att notera att i de flesta webbläsare kan textval, bilder och länkar dras som standard. Till exempel om du drar Googles logotyp på Google-sökning ser du spökbilden. Bilden kan sedan släppas i adressfältet, ett <input type="file" /> -element eller till och med på skrivbordet. För att göra andra typer av innehåll dragbara du måste använda HTML5 DnD API: er.

För att göra ett objekt dragbart set draggable=true på det elementet. Nästan allt kan dra-aktiveras, bilder, filer , länkar, filer eller någon annan markering på din sida.

I vårt exempel skapar vi ett gränssnitt för att ordna om några kolumner som har lagts ut med CSS Grid. Grundmarkeringen för mina kolumner ser ut som detta, där varje kolumn har

attribut inställt påtrue.

Här är CSS för min behållare och boxelement. Observera att den enda CSS relaterad till DnD-funktionalitet är egenskapen cursor: move. Resten av koden kontrollerar bara layouten och utformningen av behållaren och lådelementen.

Vid denna punkt kommer du upptäck att du kan dra objekten, men inget annat kommer att hända. För att lägga till DnD-funktionaliteten behöver vi använda JavaScript API.

Lyssna för att dra händelser #

Det finns ett nummer av olika händelser att koppla till för övervakning av hela dra och släpp-processen.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

För att hantera DnD-flödet behöver du någon form av källelement (där dra kommer), data pa yload (vad du försöker släppa) och ett mål (ett område för att fånga droppen). Källelementet kan vara en bild, lista, länk, filobjekt, HTML-block osv. Målet är släppzonen (eller uppsättning släppzoner) som accepterar de data som användaren försöker släppa. Tänk på att inte alla element kan vara mål, till exempel kan en bild inte vara ett mål.

Start och slut dra och släpp sekvens #

När du har draggable="true" attribut definierade i ditt innehåll, bifoga en dragstart händelsehanterare för att starta DnD-sekvensen för varje kolumn.

Den här koden ställer in kolumnens opacitet till 40% när användaren börjar dra den och återgår sedan till 100% när draghändelsen slutar.

Resultatet kan ses i Glitch-demo nedan. Dra ett objekt och det blir ogenomskinligt. Eftersom dragstart -händelsens mål är källelementet, anger du this.style.opacity till 40% visuell återkoppling om att elementet är det aktuella valet som flyttas. När du tappar objektet, även om släppfunktionen inte är på plats, återgår källelementet till 100% opacitet.

Lägg till ytterligare visuella ledtrådar med dragenter, dragover och draleave #

För att hjälpa användaren att förstå hur man interagerar med ditt gränssnitt, använd dragenter, dragover och dragleave händelsehanterare. I det här exemplet är kolumnerna droppmål förutom att de kan dras. Hjälp användaren för att förstå detta genom att göra gränsen streckad när de håller ett draget objekt över en kolumn. Till exempel kan du i din CSS skapa en over -klass för att representera element som är droppmål:

Sedan, i din J avaScript ställer in händelseshanterare, lägg till over klassen när kolumnen dras över och tar bort den när vi lämnar. I dragend hanterare, vi ser också till att ta bort klasserna i slutet av dra.

Det finns ett par punkter som är värda att täcka i den här koden :

• Om du drar något som en länk måste du förhindra webbläsarens standardbeteende, det vill säga att navigera till den länken. För att göra detta, ring e.preventDefault() i händelsen dragover. En annan bra metod är att returnera false i samma hanterare.
• dragenter händelsehanteraren används för att växla over -klassen istället för dragover .Om du använder dragover, skulle CSS-klassen växlas många gånger när händelsen dragover fortsatte att skjuta på en kolumn sväva. som skulle orsaka webbläsarens renderare för att göra en stor mängd onödigt arbete. Att behålla återdragningar till ett minimum är alltid en bra idé.Om du behöver använda dragover -händelsen för något, överväga att strypa eller avvisa din eventlyssnare.

Slutför droppen #

För att bearbeta den faktiska nedgången, lägg till en händelselyssnare för drop -händelsen. I drop -hanteraren måste du förhindra webbläsarens standardbeteende för droppar, vilket vanligtvis är en slags irriterande omdirigering. Du kan förhindra att händelsen bubblar upp DOM genom att ringa e.stopPropagation().

Om du kör koden vid den här tiden kommer objektet inte att falla till den nya platsen. För att uppnå detta måste du använda DataTransfer objekt.

Egenskapen dataTransfer är där all DnD-magi händer. Den innehåller datadelen som skickas i en dragåtgärd. dataTransfer ställs in i dragstart -händelsen och läses / hanteras i släpphändelsen. Att ringa e.dataTransfer.setData(mimeType, dataPayload) låter dig ställa in objektet ”s MIME-typ och datanyttelast.

I det här exemplet tillåter vi användare att ordna om kolumnernas ordning. För att göra det måste du först lagra källelementets HTML när du drar startar:

I händelsen drop kolumnfallet, ställa in källkolumnens HTML till HTML för målkolumnen som du släppte på, först kontrollera att användaren inte tappar tillbaka till samma kolumn som de drog från.

Du kan se resultatet i följande demo. Dra och släpp A-kolumnen ovanpå B-kolumnen och se hur de byter plats:

Mer draegenskaper #

dataTransfer -objektet exponerar egenskaper för att ge visuell återkoppling till användaren under dragprocessen. Dessa egenskaper kan också användas för att styra hur varje droppmål svarar på en viss datatyp.

• dataTransfer.effectAllowed ts vilken ”typ av drag” användaren kan utföra på elementet. Det används i dra-och-släpp-behandlingsmodellen för att initiera dropEffect under dragenter och dragover händelser. Egenskapen kan ställas in till följande värden: none, copy, copyLink, copyMove, link, linkMove, move, all och uninitialized.
• dataTransfer.dropEffect styr återkopplingen som användaren får under dragenter och dragover händelser. När användaren svävar över ett målelement anger webbläsarens markör vilken typ av operation som ska äga rum (t.ex. en kopia, ett drag osv.) Effekten kan få ett av följande värden: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) betyder att istället för att använda webbläsaren ” s standardåterkoppling för ”ghost image” kan du valfritt ställa in en dra-ikon.

Filöverföring med dra och släpp #

Detta enkla exempel använder en kolumn som både dra källa och dra mål. Detta kan ses i ett användargränssnitt där användaren ombeds att ordna om objekten. I vissa situationer kan dragmålet och källan vara olika, till exempel ett gränssnitt där användaren behöver välja en bild för att vara huvudbild för en produkt genom att dra den valda bilden till ett mål.

Dra och släpp används ofta för att tillåta användare att dra objekt från skrivbordet till ett program. Den största skillnaden är i din drop -hanterare.I stället för att använda dataTransfer.getData() för att få åtkomst till filerna, deras data wi Innehåller sig i egenskapen dataTransfer.files:

Du hittar mer information om detta i anpassad dra och släpp.