Indholdsfortegnelse
Effekten drag Drop Det består i at tage et element på siden med en musestus, normalt ved at klikke på det og trække elementet til et område, hvor det kan deponeres, så afhængigt af funktionaliteten af vores side, vil der opstå en ny begivenhed eller ej.I tidligere tider blev dette opnået ved hjælp af Javascript -biblioteker og rammer jQuery-stil, da HTML-understøttelse var begrænset, dog med HTML5, vi har disse funktioner allerede inkluderet i vores browser.
Oprettelse af elementer til træk
I HTML -dokumentet skal vi definere de elementer, der vil være i stand til at bruge denne effekt, til dette har vi nogle egenskaber, der vil hjælpe os med dette formål.
Når du placerer attributten trækkelig til et element angiver vi over for browseren, at dette element måske eller ikke må trækkes, for dette har attributten værdierne true, false og auto, som vi kan udlede, fortæller true browseren, at hvis det skal være et element, der bliver trukket, falsk er det ellers, det deaktiverer effekten, og auto fortæller browseren at tage beslutningen om, hvorvidt selve effekten skal aktiveres eller ej.
En god praksis er at bruge sand eller falsk til eksplicit at angive, om effekten er aktiveret eller ej, for selvom de fleste browsere fortolker værdien auto som sand, bør vi ikke overlade vores sides forløb til tredjemand.
Træk effektbegivenheder
Inden vi går videre til eksemplet, skal vi definere en anden vigtig egenskab ved at trække et element, det er, at når vi starter træk af et element, har vi 3 hændelser, som vi kan identificere, og som vi kan udføre forskellige behandlinger med, hvis vi vil , disse begivenheder er:
trækstart, er starten på trækhændelsen, når musen placeres over elementet, klikkes og begynder at trække elementet.
træk, det sker efter dragstart og varer hele den måde, vi trækker elementet på.
dragend, sker i det øjeblik, vi holder op med at trække varen, uanset om vi efterlader den i deponeringsområdet, eller vi har angret og holdt op med at trække den halvvejs.
Træk implementering
Lad os se et eksempel nedenfor på, hvordan vi inkorporerer alt det ovenstående på en side, vi skal oprette en liste over elementer, som vi skal tildele trækbar attribut som sand, vil vi oprette nogle css -klasser, der giver os mulighed for at ændre deres stilarter, og endelig med de nævnte begivenheder, når vi trækker et element, ændrer det dets farve.
Lad os se koden:
Eksempel
Indbetaling her
Sådan ser det ud i vores browser:
