Innehållsförteckning
Effekten dra och släpp Den består av att ta ett element på sidan med en musgest, vanligtvis genom att klicka på det och dra elementet till ett område där det kan deponeras, sedan kommer en ny händelse att inträffa eller inte, beroende på funktionen på vår sida.I tidigare tider uppnåddes detta med Javascript -bibliotek och ramverk jQuery-stil, eftersom HTML-stödet var begränsat, dock med HTML5, vi har dessa funktioner redan inkluderade i vår webbläsare.
Skapa element för dra
I HTML -dokumentet måste vi definiera de element som kommer att kunna använda denna effekt, för detta har vi några egenskaper som hjälper oss i detta syfte.
När du placerar attributet dragbar till ett element indikerar vi för webbläsaren att det här elementet kan dras eller inte, för detta har attributet värdena true, false och auto, som vi kan utläsa, säger true till webbläsaren att om det måste vara ett element som dras, är falskt annars, det inaktiverar effekten och auto uppmanar webbläsaren att fatta beslutet om själva effekten ska aktiveras eller inte.
En bra metod är att använda sant eller falskt för att uttryckligen ange om effekten är aktiverad eller inte, för även om de flesta webbläsare tolkar värdet auto som sant, bör vi inte överlåta vår sida till tredje part.
Drageffekthändelser
Innan vi går vidare till exemplet kommer vi att definiera en annan viktig egenskap för att dra ett element, detta är att när vi startar dragningen av ett element har vi tre händelser som vi kan identifiera och som vi kan utföra olika bearbetningar om vi vill , dessa händelser är:
dragstart, är början på draghändelsen inträffar när du placerar musen över elementet, klickar och börjar dra elementet.
drag, det händer efter dragstart och varar hela vägen som vi drar elementet.
dragend, inträffar i det ögonblick vi slutar dra objektet, oavsett om vi lämnar det i insättningsområdet, eller om vi har ångrat oss och slutat dra det halvvägs.
Dra implementering
Låt oss se nedan ett exempel på hur vi integrerar allt ovan på en sida, vi kommer att skapa en lista med element som vi ska tilldela dragbart attribut som sant, kommer vi att skapa några css -klasser som gör att vi kan ändra deras stilar och slutligen med de händelser som nämns när vi gör dragning av ett element kommer det att ändra dess färg.
Låt oss se koden:
Exempel
Deposition här
Så här ser det ut i vår webbläsare:
