Inledning
Dra-och-släpp är en vanlig användarinteraktion som du kan hitta i många grafiska användargränssnitt.
Det finns redan befintliga JavaScript-bibliotek för att lägga till en dra-och-släpp-funktion i din app. Det kan dock finnas situationer där ett bibliotek inte är tillgängligt eller introducerar en overhead eller beroende som ditt projekt inte behöver. I dessa situationer kan kunskap om API: er som är tillgängliga för dig i moderna webbläsare erbjuda alternativa lösningar.
HTML Drag and Drop API är beroende av DOM: s händelsemodell för att få information om vad som dras eller släpps och för att uppdatera det elementet genom att dra eller släppa. Med JavaScript-händelsehanterare kan du förvandla vilket element som helst till ett dragbart objekt eller ett objekt som kan släppas till.
I den här självstudien bygger vi ett drag-och-släpp-exempel med hjälp av HTML-drag och släpp API med vanilj JavaScript för att använda händelsehanterarna.
Förutsättningar
För att slutföra denna handledning behöver du:
- En modern webbläsare som stöder Drag and Drop API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).
Steg 1 – Skapa projektet och första markeringen
Vårt projekt kommer att bestå av en behållare med två typer av underordnade element:
- Underordnade element som du kan dra
- Underordnade element som kan innehålla element i dem
Öppna först ditt terminalfönster och skapa en ny projektkatalog:
Navigera sedan till den katalogen:
Skapa sedan en index.html -fil i den katalogen:
Lägg sedan till pannkodskoden för en HTML-webbsida:
Och mellan <body> -taggar lägger till ditt draggable -objekt och ditt dropzone (släppmål):
Spara och stäng filen. Skapa sedan en style.css -fil:
Lägg sedan till stilar för elementen i vår index.html fil:
Detta kommer att lägga till lite formatering i appen. Nu kan du se index.html i webbläsaren och observera att detta ger en draggable <div> och a dropzone <div>.
Därefter gör vi den första <div> dragbar genom att lägga till attributet draggable:
Spara och stäng filen.
Slutligen, se index.html i webbläsaren igen. Om vi klickar på draggable <div> och drar det över skärmen, bör det finnas en visuell indikation på att den rör sig.
Standardvärdet för attributet draggable är auto. Det betyder om elementet kan dras bestäms av din webbläsares standardbeteende. Vanligtvis betyder detta att textval, bilder och länkar kan dras utan att specificera draggable="true".
Du har nu en HTML-fil med ett dragbart element. Vi går vidare till att lägga till onevent hanterare.
Steg 2 – Hantering av dra-och-släpp-händelser med JavaScript
För närvarande, om vi släpp musen medan du drar det dragbara elementet, ingenting händer. För att utlösa en åtgärd för dra eller släpp på DOM-element måste vi använda Drag and Drop API:
-
ondragstart: Den här händelsehanteraren kommer att fästas till vårtdraggable-element och avfyra när endragstart-händelse inträffar. -
ondragover: Den här händelsehanteraren kommer att bifogas vårtdropzone-element och avfyras när endragover-händelse inträffar. -
ondrop: Denna händelsehanterare kommer också att fästas till vårtdropzone-element och aktivera när ettdrop-händelse inträffar.
Obs: Totalt finns åtta händelsehanterare: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart och ondrop. För vårt exempel behöver vi inte alla.
Låt oss först referera till en ny https://www.digitalocean.com/community/tutorials/script.js -fil i vår index.html:
Skapa sedan en ny https://www.digitalocean.com/community/tutorials/script.js fil:
DataTransfer -objektet kommer att hålla reda på informationen som är relaterad till det aktuella drag som sker. För att uppdatera vårt element på dra och släpp måste vi komma åt objektet DataTransfer.För att göra detta kan vi välja dataTransfer -egenskapen från DOM-elementets DragEvent.
Obs: DataTransfer objekt kan tekniskt spåra information för att flera element dras samtidigt. För vårt exempel fokuserar vi på att dra ett element.
Metoden dataTransfer är setData kan användas för att ställa in information om dragstatus för ditt för närvarande dragna element. Det tar två parametrar:
- en sträng som deklarerar formatet för den andra parametern
- den faktiska data som överförs
Vårt mål är att flytta vårt draggable -element till ett nytt överordnat element. Vi måste kunna välja vårt draggable -element med ett unikt id. Vi kan ställa in id för det dragna elementet med metoden setData så att det kan användas senare.
Låt oss Besök vår https://www.digitalocean.com/community/tutorials/script.js -fil och skapa en ny funktion för att använda setData:
Obs! Internet Explorer 9 till och med 11 har enligt uppgift problem med att använda "text/plain". Formatet måste "text" för den webbläsaren.
För att uppdatera det dragna objektets CSS-styling kan vi komma åt dess stilar med DOM-händelsen igen och genom ställa in vilka stilar vi vill ha för currentTarget.
Låt oss lägga till i vår funktion och ändra backgroundColor till yellow:
Obs! Alla stilar du ändrar måste uppdateras manuellt igen på drop om du vill ha bara dragstilar. Om du ändrar något när det börjar dra kommer det dragna elementet att behålla den nya stilen såvida du inte byter tillbaka det.
Nu har vi vår JavaScript-funktion för att dra börjar.
Vi kan lägga till ondragstart till draggable -elementet i index.html:
Visa index.html i din webbläsare. Om du försöker dra ditt objekt nu, kommer stylingen som deklareras i vår funktion att tillämpas:
Ingenting händer dock när du släpper upp ditt klick.
Nästa händelsehanterare som avfyras i den här sekvensen är ondragover.
Standardfallbeteendet för vissa DOM-element som <div> i webbläsare accepterar vanligtvis inte tappning. Detta beteende kommer att fånga upp beteendet vi försöker implementera. För att säkerställa att vi får önskat droppbeteende kommer vi att använda preventDefault.
Låt oss se över https://www.digitalocean.com/community/tutorials/script.js -filen och skapa en ny funktion för att använda preventDefault. Lägg till den här koden i slutet av filen:
Nu, vi kan lägga till ondragover till vårt dropzone -element i index.html:
Vid denna tidpunkt har vi fortfarande inte skrivit kod hanterar den faktiska droppningen. Den sista händelsehanteraren som avfyras i den här sekvensen är ondrop.
Låt oss se över vår https://www.digitalocean.com/community/tutorials/script.js -fil och skapa en ny funktion .
Vi kan referera till de data vi sparade tidigare med dataTransfer -objektets setData -metod. Vi använder dataTransfer -objektets getData -metod. De data vi ställde in var id, så det är vad som kommer att returneras till oss:
Välj vårt draggable -element med id vi hämtade:
Välj vår dropzone element:
Lägg till vår draggable -element till dropzone:
Återställ vårt dataTransfer -objekt:
Nu kan vi lägga till ondrop till vårt dropzone -element i index.html:
När det är klart har vi en fullständig dra-och-släpp-funktion. Visa index.html i din webbläsare och dra draggable -elementet till dropzone.
Vårt exempel hanterar scenariot för ett enda dragbart objekt och ett enda mål. Du kan ha flera dragbara objekt, flera släppmål och anpassa det med alla andra Drag and Drop API-händelser.
Steg 3 – Bygg ett avancerat exempel med flera dragbara objekt
Här är ytterligare ett exempel på hur du kan använda detta API: en att göra-lista med dragbara uppgifter som du kan flytta från en "To-do" -kolumn till en "Done" -kolumn.
För att skapa din egen att göra-lista, lägg till fler dragbara element med unika id s till index.html:
Visa index.html i din webbläsaren och dra objekten i kolumnen Att göra till kolumnen Klar. Du har skapat en att göra-applikation och testat funktionaliteten.
Slutsats
I den här artikeln skapade du en att-göra-app för att utforska dra-och-släpp-funktionen tillgängligt för moderna webbläsare.
Drag and Drop API erbjuder flera alternativ för att anpassa dina åtgärder utöver att dra och släppa. Du kan till exempel uppdatera CSS-utformningen av dina dragna objekt. Istället för att flytta objektet kan du också välja att kopiera det dragbara objektet så att det replikeras vid släpp.
Tänk på att även om många webbläsare stöder den här tekniken kanske du inte kan lita på på den om din målgrupp består av enheter som inte stöder den här funktionen.
Om du vill lära dig mer om allt du kan släppa med drag-och-släpp-API: n kan du läsa MDN: s dokument om det.