HTML5 nuvilkimo (DnD) API reiškia, kad beveik bet kurį puslapio elementą galima vilkti. Šiame straipsnyje apžvelgsime vilkimo pagrindus.
Kurkite velkamą turinį
Verta paminėti, kad daugumoje naršyklių teksto pasirinkimus, vaizdus ir nuorodas galima vilkti pagal numatytuosius nustatymus. Pavyzdžiui, jei vilksite "Google" logotipą "Google" paieškoje, pamatysite vaiduoklio vaizdą. Tada vaizdą galima nuvilkti į adreso juostą, elementą <input type="file" /> ar net darbalaukyje. Norėdami, kad būtų galima vilkti kitų tipų turinį, turite naudoti HTML5 DnD API.
Norėdami, kad objektą būtų galima vilkti, nustatykite elementądraggable=teisinga。 Vilkimas gali būti palaikomas beveik bet kokiam elementui, įskaitant vaizdus, failus, saitus, failus ar bet kokį žymėjimą puslapyje.
Mūsų pavyzdyje sukursime sąsają, kad pertvarkytume kai kuriuos stulpelius, kurie buvo išdėstyti naudojant CSS tinklelį. Pagrindinis šių stulpelių žymėjimas parodytas toliau, o kiekvieno stulpelio vilkimo ypatybė nustatyta kaip true.
Čia yra CSS mano konteinerio ir dėžutės elementai. Atkreipkite dėmesį, kad vienintelis CSS, susijęs su DnD funkcijomis, yra žymeklis: perkelti ypatybė. Likusi kodo dalis valdo tik konteinerio ir dėžutės elementų išdėstymą ir stilių.
Šiuo metu pamatysite, kad galite vilkti elementą, bet nieko daugiau nenutiks. Norėdami pridėti DnD funkcionalumą, turime naudoti JavaScript API.
Klausykitės "drag" renginių
Galima pridėti daug skirtingų įvykių, kad būtų galima stebėti visą vilkimo procesą.
- Vilkimo pradžia
- vilkti
- Dragenter
- Dragleave
- dragover
- lašas
- vilkti
Norėdami apdoroti DnD srautą, jums reikia tam tikro šaltinio elemento (vilkimo pradžios taško), duomenų naudingosios apkrovos (ką bandote įdėti) ir tikslo (srities, kurioje užfiksuojama vieta). Šaltinio elementai gali būti vaizdai, sąrašai, nuorodos, failų objektai, HTML blokai ir kt. Tikslas yra priimti duomenų, kuriuos vartotojas bando įdėti, kritimo zoną (arba kritimo zonų rinkinį). Atminkite, kad ne visi elementai gali būti tikslai, pavyzdžiui, vaizdai negali būti tikslai.
Nuvilkimo sekos pradžia ir pabaiga
Apibrėžę turinio ypatybę draggable="true", pridėkite dragstart įvykio apdorojimo programą, kad paleistumėte kiekvieno stulpelio DnD seką.
Šis kodas nustatys stulpelio neskaidrumą iki 40%, kai vartotojas pradės vilkti, o vilkimo įvykio pabaigoje grąžins jį į 100%.
Rezultatus galima pamatyti žemiau esančioje "Glitch" demonstracinėje versijoje. Vilkite elementą ir jis taps nepermatomas. Kadangi dragstart įvykis nukreiptas į šaltinio elementą, nustačius this.style.opacity į 40%, vartotojas gauna vaizdinį atsiliepimą, kad šiuo metu pasirinktas elementas juda. Įdėjus elementą, šaltinio elementas grįžta į 100% neskaidrumą, nors išdėstymo funkcija dar nebuvo parašyta.
Naudokite "dragenter", "dragover" ir "dragleave", kad pridėtumėte papildomų vaizdinių užuominų
Norėdami padėti vartotojams suprasti, kaip sąveikauti su sąsaja, naudokite dragenter, dragover ir dragleave įvykių apdorojimo programas. Toliau pateiktame pavyzdyje stulpelius galima vilkti arba nukreipti. Kad vartotojai tai suprastų, kai vartotojas velka elementą pro stulpelį, to stulpelio kraštinė tampa punktyrine linija. Pavyzdžiui, CSS galite sukurti virš klasę, kad pavaizduotumėte elementą, kuris yra paskirties vieta:
Tada nustatykite įvykių apdorojimo programą "JavaScript", kad vilkdami pro stulpelį įtrauktumėte klasę "over" ir pašalintumėte ją išeidami. Vilkimo apdorojimo programoje taip pat norime įsitikinti, kad klasė pašalinama vilkimo pabaigoje.
Šiame kode reikia paminėti keletą punktų:
Vilkdami elementą, pvz., nuorodą, turite užblokuoti numatytąjį naršyklės veikimą, t. y. pereiti prie tos nuorodos. Norėdami tai padaryti, iškvieskite e.preventDefault() į dragover įvykį. Kita gera praktika yra grąžinti klaidingą toje pačioje apdorojimo programoje.
Naudokite dragenter įvykių apdorojimo programą, kad perjungtumėte klases, o ne dragover. Jei naudojate "dragover", CSS klasė perjungiama kelis kartus, nes įvykių "dragover" nuolat suveikia, kai stulpelis užveda. Galiausiai dėl to naršyklės atvaizdavimo priemonė atliks daug nereikalingo darbo. Geriausia visada perbraižyti iki minimumo. Jei dėl kokių nors priežasčių reikia naudoti "dragover" įvykius, apsvarstykite galimybę apriboti arba pašalinti įvykių klausytojus.
Užbaikite vietą
Norėdami tvarkyti faktinę paskirties vietą, įtraukite įvykio klausytuvą. Drop-handler turite užblokuoti numatytąjį naršyklės paskirties vietos elgesį, kuris paprastai yra tam tikras erzinantis peradresavimas. e.stopPropagation() gali būti iškviestas, kad įvykis nesuaktyvintų DOM.
Būtinai užregistruokite naują apdorojimo programą kitoje apdorojimo programoje:
Jei šiuo metu paleisite kodą, projektas nebus perkeltas į naują vietą. Norėdami tai pasiekti, turite naudoti DataTransfer objektą.
Ypatybė dataTransfer yra vieta, kur vyksta visi DnD stebuklai. Jis išsaugo duomenų fragmentus, išsiųstus vilkimo operacijos metu. dataTransfer nustatomas dragstart įvykyje ir nuskaitomas / apdorojamas nuleidimo įvykyje. Iškvieskite e.dataTransfer.setData(mimeType, dataPayload), kad nustatytumėte objekto MIME tipą ir duomenų naudingąją apkrovą.
Toliau pateiktame pavyzdyje leisime vartotojams pertvarkyti stulpelių tvarką. Norėdami tai padaryti, pirmiausia turite išsaugoti šaltinio elemento HTML vilkimo pradžioje:
Tvarkykite stulpelio vietą nuleidimo įvykyje, nustatykite šaltinio stulpelio HTML į tikslinio stulpelio, kuriame jis įdėtas, HTML, pirmiausia patikrinkite, ar vartotojo nuvilktas tikslinis stulpelis yra toks pat kaip šaltinio stulpelis.
Daugiau vilkimo ypatybių
Objektas dataTransfer atskleidžia ypatybes, kurios naudojamos vartotojui pateikti vaizdinį grįžtamąjį ryšį vilkimo proceso metu. Šios ypatybės taip pat gali būti naudojamos norint valdyti, kaip kiekviena paskirties vieta reaguoja į konkrečius duomenų tipus.
- dataTransfer.effectAllowed riboja "vilkimo tipą", kurį vartotojas gali atlikti elemente. Jis naudojamas nuvilkimo apdorojimo modelyje, norint inicijuoti dropEffect dragenter ir dragover įvykių metu. Šią ypatybę galima nustatyti į šias reikšmes: none, copy, copyLink, copyMove, link, linkMove, move, all ir uninitialized.
- dataTransfer.dropEffect valdo vartotojui teikiamus atsiliepimus "dragenter" ir "dragover" įvykių metu. Kai vartotojas užveda pelės žymeklį virš tikslinio elemento, naršyklės žymeklis nurodys veiksmo tipą, kurį reikia atlikti (pvz., kopijuoti, perkelti ir pan.). Poveikis gali būti viena iš šių reikšmių: nėra, kopijuoti, susieti, perkelti.
- e.dataTransfer.setDragImage(imgElement, x, y) rodo, kad numatytasis naršyklės "vaiduoklio vaizdo" atsiliepimas nenaudojamas, o vietoj to yra galimybė nustatyti vilkimo piktogramą.
Įkelkite failus vilkdami ir numesdami
Toliau pateiktame paprastame pavyzdyje stulpelis naudojamas kaip vilkimo šaltinis ir vilkimo tikslas. Tai gali būti matoma vartotojo sąsajoje, kai vartotojo prašoma pertvarkyti elementus. Kai kuriais atvejais tikslo vilkimas ir šaltinio vilkimas gali skirtis, pvz., sąsajoje, kurioje vartotojas turi pasirinkti vaizdą kaip pagrindinį produkto vaizdą, vilkdamas pasirinktą vaizdą į tikslą.
Vilkimas dažnai naudojamas norint leisti vartotojams vilkti elementus iš darbalaukio į programą. Pagrindinis skirtumas yra lašų apdorojimo įrenginys. Nenaudojant dataTransfer.getData() prieigai prie failo, failo duomenys bus įtraukti į ypatybę dataTransfer.files:
Originali nuoroda:Hipersaito prisijungimas matomas.
|
Publikuota: 2022-4-26 10:30:50
|
|
|
|
Publikuota 2022-4-26 21:27:25
|
