Turinys
Efektas vilkite ir numeskite Tai apima puslapio elemento paėmimą pelės gestu, paprastai jį spustelėjus ir nuvilkus minėtą elementą į vietą, kur jis gali būti saugomas, tada, atsižvelgiant į mūsų puslapio funkcionalumą, įvyks naujas įvykis arba ne.Ankstesniais laikais tai buvo padaryta naudojant „Javascript“ bibliotekos ir sistemos „jQuery“ stiliaus, nes HTML palaikymas buvo ribotas, tačiau HTML5, šias funkcijas jau įtraukėme į savo naršyklę.
Vilkimo elementų kūrimas
HTML dokumente turime apibrėžti elementus, kurie galės panaudoti šį efektą, todėl turime tam tikrų savybių, kurios mums padės šiuo tikslu.
Įdėdami atributą tempiamas į elementą, kurį naršyklei nurodome, kad šis elementas gali būti arba negali būti vilktas, nes šis atributas turi reikšmes true, false ir auto, kaip galime daryti išvadą, tiesa sako naršyklei, kad jei tai turi būti elementas, yra vilktas, klaidingas yra kitaip, jis išjungia efektą ir automatiškai liepia naršyklei nuspręsti, ar suaktyvinti patį efektą, ar ne.
Gera praktika yra naudoti teisingą ar klaidingą, kad būtų aiškiai nurodyta, ar efektas yra suaktyvintas, ar ne, nes nors dauguma naršyklių automatinę vertę aiškina kaip teisingą, neturėtume palikti savo puslapio eigos trečiosioms šalims.
Vilkimo efekto įvykiai
Prieš pereidami prie pavyzdžio, mes apibrėšime dar vieną svarbią elemento vilkimo savybę, tai yra tai, kad pradėdami vilkti elementą turime 3 įvykius, kuriuos galime identifikuoti ir su kuriais galime atlikti įvairų apdorojimą, jei norime , šie įvykiai yra:
dragstart, yra vilkimo įvykio pradžia, kai pele perkeliama virš elemento, spustelėjama ir pradedama vilkti minėtą elementą.
vilkti, tai atsitinka po dragstarto ir tęsiasi visą laiką, kol tempiame elementą.
dragendas, įvyksta tą akimirką, kai mes nustojame tempti daiktą, nesvarbu, ar paliekame jį depozito zonoje, ar atgailavome ir nustojome vilkti iki pusės.
Vilkimas
Žemiau pamatysime pavyzdį, kaip visa tai, kas išdėstyta aukščiau, įtraukiame į puslapį, sudarysime elementų, kuriems priskirsime vilktinas atributas kaip tikras, mes sukursime keletą css klasių, kurios leis mums keisti jų stilius ir galiausiai su paminėtais įvykiais, kai vilkime elementą, jis pakeis jo spalvą.
Pažiūrėkime kodą:
Pavyzdys
Depozitas čia
Dabar, kaip tai atrodo mūsų naršyklėje:
