HTML5 - Dra och släpp, del 2

Redan i den första delen av denna handledning såg vi hur man startar dra händelse att dra elementen, det vill säga att vi gjorde en del av arbetet, vi såg hur vi skulle interagera med de olika händelserna i det första avsnittet.
Nu måste vi veta hur man aktiverar området där elementet ska deponeras, det är redan den kompletterande åtgärden som gör att vi kan uppnå fullständiga funktioner på vår sida.
Skapa insättningsområdet
Detta är området där vi ska lämna de element som vi drar, för att manipulera detta område kommer vi att ha flera händelser, för att bättre förstå hur vi ska hantera dessa händelser kommer vi att lista var och en och förklara hur det fungerar .
Händelser (redigera)

• Dragenter: Det aktiveras när ett draget element kommer in i det utrymme på skärmen som vi har definierat för insättningsområdet.
• Dra över: Det utlöses när det dragna elementet rör sig inom insättningsområdet som vi redan har definierat.
• Dragleave: Den aktiveras i det ögonblick då ett släpat element lämnar insättningsområdet.
• Släppa: Det är händelsen som aktiveras när en vara lämnas kvar i insättningsområdet.

Ta emot varan
När vi väl vet vilka händelser vi har till vårt förfogande kommer vi att bygga en enkel kod, där den när vi släpper eller deponerar ett element som vi har dragit visas i insättningsområdet.
För detta kommer vi att använda några funktioner i inre HTML där vi ska klona elementet som kastas in i området.
Låt oss se exempelkoden:

 Exempel  
Släpp här

Om vi ​​tittar noga definierar vi målelementet som elementet som kommer att innehålla deponeringsområdet. När detta är klart definierar vi vad som kommer att hända i var och en av händelserna, om vi tittar på släppa händelse är där det sista steget inträffar, här kommer vi att klona det dragna elementet och tack vare inre HTML vi kommer att visa det asynkront när vi tappar elementet som vi har dragit.
En annan sak vi måste uppmärksamma är att skriva över standardhändelsen för webbläsaren, vi hanterar detta när vi skapar funktionen handtag DragPå så sätt hindrar vi webbläsaren från att tolka instruktionerna på ett sätt som inte förväntas av oss.
I vår webbläsare ska det se ut så här:

Vi har äntligen lyckats göra en dra och släpp i HTML5 utan att vara beroende av externa bibliotek, nu med lite fantasi kan vi göra många funktioner, till exempel en kundvagn som bara fungerar med dra och släpp.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng