Satura rādītājs
Efekts velciet un nometiet Tas sastāv no lapas elementa uzņemšanas ar peles žestu, parasti noklikšķinot uz tā un velkot minēto elementu uz apgabalu, kur to var glabāt, tad atkarībā no mūsu lapas funkcionalitātes notiks jauns notikums.Iepriekšējos laikos tas tika paveikts, izmantojot Javascript bibliotēkas un ietvari jQuery stilā, jo HTML atbalsts bija ierobežots, tomēr ar HTML5, šīs funkcijas jau ir iekļautas mūsu pārlūkprogrammā.
Elementu izveide vilkšanai
HTML dokumentā mums ir jānosaka elementi, kas varēs izmantot šo efektu, jo mums ir dažas īpašības, kas mums palīdzēs šajā nolūkā.
Ievietojot atribūtu vilkams uz elementu, ko mēs pārlūkprogrammai norādām, ka šo elementu var vilkt vai nē, jo šim atribūtam ir vērtības true, false un auto, kā mēs varam secināt, true norāda pārlūkprogrammai, ka, ja tam jābūt elementam, kas tiek vilkts, nepatiess ir citādi, tas atspējo efektu un automātiski liek pārlūkprogrammai izlemt, vai aktivizēt pašu efektu.
Laba prakse ir izmantot patiesu vai nepatiesu, lai skaidri norādītu, vai efekts ir aktivizēts, jo, lai gan lielākā daļa pārlūkprogrammu interpretē automātisko vērtību kā patiesu, mums nevajadzētu atstāt savas lapas gaitu trešo personu ziņā.
Velciet efektu notikumus
Pirms pāriet uz piemēru, mēs definēsim vēl vienu svarīgu elementa vilkšanas iezīmi, proti, uzsākot elementa vilkšanu, mums ir 3 notikumi, kurus mēs varam identificēt un ar kuriem mēs varam veikt dažādas apstrādes, ja mēs to vēlamies , šie notikumi ir:
dragstart, ir vilkšanas notikuma sākums, novietojot peli virs elementa, noklikšķinot un sākot vilkt minēto elementu.
vilkt, tas notiek pēc dragstart un ilgst visu laiku, kamēr mēs velkam elementu.
dragend, notiek brīdī, kad pārtraucam vilkt preci neatkarīgi no tā, vai mēs to atstājam depozīta zonā, vai arī esam nožēlojuši grēkus un pārstājuši vilkt līdz pusei.
Velciet ieviešanu
Tālāk aplūkosim piemēru, kā mēs visu iepriekš minēto iekļaujam lapā, mēs izveidosim to elementu sarakstu, kuriem mēs piešķirsim vilkams atribūts kā patiess, mēs izveidosim dažas css klases, kas ļaus mums mainīt to stilus, un, visbeidzot, ar notikumiem, kas minēti, kad mēs velkam kādu elementu, tas mainīs tā krāsu.
Apskatīsim kodu:
Piemērs
Depozīts šeit
Tagad tas izskatās mūsu pārlūkprogrammā:
