Inhoudsopgave
Het effect slepen, laten vallen Het bestaat uit het nemen van een element van de pagina met een muisgebaar, meestal door erop te klikken en het element naar een gebied te slepen waar het kan worden gedeponeerd, waarna, afhankelijk van de functionaliteit van onze pagina, een nieuwe gebeurtenis zal plaatsvinden of niet.In vroeger tijden werd dit bereikt met behulp van Javascript-bibliotheken en frameworks jQuery-stijl, omdat HTML-ondersteuning beperkt was, maar met HTML5, hebben we deze functionaliteiten al in onze browser opgenomen.
De elementen voor slepen maken
In het HTML-document moeten we de elementen definiëren die dit effect kunnen gebruiken, hiervoor hebben we enkele eigenschappen die ons hierbij zullen helpen.
Bij het plaatsen van het attribuut sleepbaar aan een element geven we aan de browser aan dat dit element al dan niet gesleept mag worden, hiervoor heeft het attribuut de waarden true, false en auto, zoals we kunnen afleiden, true vertelt de browser dat als het een element moet zijn dat wordt gesleept, false is anders, het schakelt het effect uit en vertelt de browser automatisch om de beslissing te nemen om het effect zelf al dan niet te activeren.
Een goede gewoonte is om true of false te gebruiken om expliciet aan te geven of het effect al dan niet is geactiveerd, want hoewel de meeste browsers de waarde auto als true interpreteren, moeten we het verloop van onze pagina niet aan derden overlaten.
Sleep-effectgebeurtenissen
Voordat we verder gaan met het voorbeeld, gaan we een ander belangrijk kenmerk van het slepen van een element definiëren, namelijk dat wanneer we het slepen van een element starten, we 3 gebeurtenissen hebben die we kunnen identificeren en waarmee we verschillende bewerkingen kunnen uitvoeren als we dat willen , deze evenementen zijn:
sleepstart, is het begin van de sleepgebeurtenis vindt plaats wanneer de muis over het element wordt geplaatst, klikt en het element begint te slepen.
sleuren, het gebeurt na dragstart en duurt de hele weg dat we het element slepen.
dragend, vindt plaats op het moment dat we stoppen met het slepen van het item, of we het nu in het depot laten staan, of we hebben ons bekeerd en zijn halverwege gestopt met slepen.
Implementatie slepen
Laten we hieronder een voorbeeld bekijken van hoe we al het bovenstaande in een pagina opnemen, we gaan een lijst met elementen maken waaraan we de versleepbaar kenmerk als waar, zullen we enkele css-klassen maken waarmee we hun stijlen kunnen wijzigen en tot slot met de genoemde gebeurtenissen wanneer we een element verslepen, verandert het van kleur.
Laten we de code eens bekijken:
Voorbeeld
Stort hier
Hoe het er nu uitziet in onze browser:
