Sadržaj
Učinak povuci i ispusti Sastoji se od uzimanja elementa stranice pokretom miša, obično klikom na njega i povlačenjem navedenog elementa na područje gdje se može pohraniti, tada će se, ovisno o funkcionalnosti naše stranice, dogoditi novi događaj ili ne.U ranijim vremenima to je postignuto korištenjem Javascript knjižnice i okviri jQuery stilu, budući da je HTML podrška bila ograničena HTML5, te funkcionalnosti već imamo uključene u naš preglednik.
Stvaranje elemenata za povlačenje
U HTML dokumentu moramo definirati elemente koji će moći koristiti ovaj učinak, jer za to imamo neka svojstva koja će nam u tome pomoći.
Prilikom postavljanja atributa vuče elementu koji označavamo pregledniku da se ovaj element može povući, a možda i ne, jer za to atribut ima vrijednosti true, false i auto, kao što možemo zaključiti, true govori pregledniku da, ako to mora biti element koji je povučeno, false je inače, onemogućuje učinak i automatski govori pregledniku da donese odluku hoće li aktivirati sam efekt ili ne.
Dobra je praksa koristiti true ili false da biste izričito naznačili je li učinak aktiviran ili ne, jer iako većina preglednika vrijednost auto tumači kao istinitu, ne bismo trebali prepustiti tijek naše stranice trećim stranama.
Događaji s efektom povlačenja
Prije nego prijeđemo na primjer, definirat ćemo još jednu važnu karakteristiku povlačenja elementa, a to je da pri pokretanju povlačenja elementa imamo 3 događaja koja možemo identificirati i s kojima možemo provesti različite obrade ako želimo , ti događaji su:
dragstart, Do početka događaja povlačenja dolazi kada postavite miša preko elementa, kliknete i počnete povlačiti navedeni element.
opterećenje, to se događa nakon dragstart -a i traje čitav put dok povlačimo element.
dragend, događa se u trenutku kada stavku prestanemo vući, bilo da smo je ostavili u području za polaganje, ili smo se pokajali i prestali je vući do pola.
Povucite implementaciju
Pogledajmo u nastavku primjer kako sve gore navedeno ugrađujemo u stranicu, stvorit ćemo popis elemenata kojima ćemo dodijeliti atribut koji se može povući kao istinit, stvorit ćemo neke css klase koje će nam omogućiti mijenjanje njihovih stilova i na kraju sa spomenutim događajima kada povučemo element promijenit će njegovu boju.
Pogledajmo kod:
Primjer
Polog ovdje
Sada kako to izgleda u našem pregledniku:
