Turinys
Jau pirmoje šios pamokos dalyje pamatėme, kaip pradėti vilkimo įvykis vilkdami elementus, tai yra, atlikome dalį darbo, pamatėme, kaip bendrauti su skirtingais tos pirmosios dalies įvykiais.Dabar turime žinoti, kaip suaktyvinti sritį, kurioje bus deponuojamas elementas, tai jau yra papildomas veiksmas, leidžiantis pasiekti visas mūsų puslapio funkcijas.
Depozito zonos kūrimas
Tai sritis, kurioje mes paliksime elementus, kuriuos vilksime, norėdami manipuliuoti šia sritimi, turėsime keletą įvykių, kad geriau suprastume, kaip elgtis su šiais įvykiais, išvardinsime kiekvieną ir paaiškinsime, kaip tai veikia .
Įvykiai (redaguoti)
- Dragenter: Jis suaktyvinamas, kai velkamas elementas patenka į ekrano vietą, kurią nustatėme indėlio sričiai.
- „Dragover“: Jis suaktyvinamas, kai velkamas elementas juda mūsų jau apibrėžtoje indėlio srityje.
- „Dragleave“: Jis įjungiamas tuo metu, kai ištrauktas elementas palieka indėlio zoną.
- Lašas: Tai įvykis, kuris aktyvuojamas, kai daiktas paliekamas indėlio zonoje.
Kai žinosime, kokius įvykius turime, mes sukursime paprastą kodą, kuriame numetant ar deponuojant elementą, kurį nuvilkėme, jis rodomas indėlio srityje.
Tam naudosime kai kurias vidinis HTML kur ketiname klonuoti elementą, kuris įmetamas į zoną.
Pažiūrėkime kodo pavyzdį:
Pavyzdys
Nusileisk čia
Jei atidžiai pažvelgsime, tikslinį elementą apibrėšime kaip elementą, kuriame bus indėlio sritis, kai tai bus padaryta, nustatysime, kas atsitiks kiekviename iš įvykių, jei pažvelgsime į lašo renginys yra paskutinis žingsnis, čia mes klonuosime tempiamą elementą ir dėka vidinis HTML mes parodysime tai asinchroniškai, kai numesime elementą, kurį tempėme.
Kitas dalykas, į kurį turime atkreipti dėmesį, yra perrašyti numatytąjį naršyklės įvykį, kurį valdome kurdami funkciją rankenaDragTokiu būdu neleidžiame naršyklei interpretuoti instrukcijų taip, kaip mes nesitikime.
Mūsų naršyklėje jis turėtų atrodyti taip:
