Innholdsfortegnelse
Effekten dra slipp Den består av å ta et element på siden med en musebevegelse, vanligvis ved å klikke på det og dra elementet til et område der det kan deponeres, og avhengig av funksjonaliteten til siden vår vil en ny hendelse oppstå eller ikke.I tidligere tider ble dette oppnådd ved hjelp av Javascript -biblioteker og rammer jQuery-stil, ettersom HTML-støtte var begrenset, men med HTML5, har vi disse funksjonene allerede inkludert i nettleseren vår.
Opprette elementene for dra
I HTML -dokumentet må vi definere elementene som vil kunne bruke denne effekten, for dette har vi noen egenskaper som vil hjelpe oss med dette formålet.
Når du plasserer attributtet drabar til et element angir vi for nettleseren at dette elementet kan bli trukket eller ikke, for dette har attributtet verdiene true, false og auto, som vi kan utlede, forteller true nettleseren at hvis det må være et element som blir trukket, falsk er det ellers, det deaktiverer effekten og auto ber nettleseren om å ta avgjørelsen om den skal aktivere selve effekten eller ikke.
En god praksis er å bruke true eller false for å eksplisitt angi om effekten er aktivert eller ikke, for selv om de fleste nettlesere tolker verdien auto som sann, bør vi ikke overlate siden til tredjeparter.
Dra effekt -hendelser
Før vi går videre til eksemplet, skal vi definere en annen viktig egenskap ved å dra et element, dette er at når vi starter dragingen av et element, har vi 3 hendelser som vi kan identifisere og som vi kan utføre forskjellige behandlinger om vi vil , disse hendelsene er:
drastart, er starten på drahendelsen som oppstår når du plasserer musen over elementet, klikker og begynner å dra elementet.
dra, det skjer etter dragstart og varer hele veien som vi drar elementet.
dragend, skjer i det øyeblikket vi slutter å dra varen, enten vi lar den stå i innskuddsområdet, eller vi har angret og sluttet å dra den halvveis.
Dra implementering
La oss se nedenfor et eksempel på hvordan vi inkorporerer alt det ovennevnte på en side, vi skal lage en liste over elementer som vi skal tilordne dragbar -attributt som sant, vil vi lage noen css -klasser som lar oss endre stilene deres, og til slutt med hendelsene som er nevnt når vi drar et element, vil det endre fargen.
La oss se koden:
Eksempel
Innskudd her
Slik ser det ut i nettleseren vår:
