HTML5 vilkšanas un nomešanas (DnD) API nozīmē, ka gandrīz jebkurš lapas elements var kļūt velkams. Šajā rakstā mēs aplūkosim vilkšanas un nomešanas pamatus.
Velkama satura izveide
Ir vērts atzīmēt, ka lielākajā daļā pārlūkprogrammu teksta atlases, attēli un saites pēc noklusējuma ir velkamas. Piemēram, velkot Google logotipu Google meklēšanā, jūs redzēsiet spoku attēlu. Pēc tam attēlu var vilkt un nomest adreses joslā <input type="file" /> elementā vai pat darbvirsmā. Lai padarītu velkamu cita veida saturu, jāizmanto HTML5 DnD API.
Lai objektu padarītu velkamu, iestatiet elementuvelkams=patiess。 Vilkšanu var atbalstīt gandrīz jebkuram elementam, tostarp attēliem, failiem, saitēm, failiem vai jebkurai lapas atzīmei.
Mūsu piemērā mēs izveidosim interfeisu, lai pārkārtotu dažas kolonnas, kas ir izkārtotas, izmantojot CSS režģi. Šo kolonnu pamata atzīme ir parādīta zemāk, un velkamais rekvizīts katrai kolonnai ir iestatīts uz true.
Šeit ir CSS maniem konteinera un kastes elementiem. Ņemiet vērā, ka vienīgais CSS, kas saistīts ar DnD funkcionalitāti, ir rekvizīts kursors: pārvietot. Pārējais kods kontrolē tikai konteinera un kastes elementu izkārtojumu un stilu.
Šajā brīdī jūs redzēsiet, ka varat vilkt vienumu, bet nekas cits nenotiks. Lai pievienotu DnD funkcionalitāti, mums jāizmanto JavaScript API.
Drag notikumu klausīšanās
Var pievienot daudzus dažādus notikumus, lai uzraudzītu visu vilkšanas un nomešanas procesu.
- Vilkšanas sākums
- vilkt
- Dragenter
- Vilkšanas atvaļinājums
- dragover
- piliens
- vilktājs
Lai apstrādātu DnD straumi, jums ir nepieciešams sava veida avota elements (vilkšanas sākumpunkts), datu lietderīgā slodze (ko mēģināt ievietot) un mērķis (apgabals, kurā tiek fiksēts izvietojums). Avota elementi var būt attēli, saraksti, saites, failu objekti, HTML bloki utt. Mērķis ir pieņemt lietotāja mēģina ievietot datu nomešanas zonu (vai nomešanas zonu kopu). Paturiet prātā, ka ne visi elementi var būt mērķi, piemēram, attēli nevar būt mērķi.
Vilkšanas un nomešanas secības sākšana un beigšana
Pēc satura rekvizīta draggable="true" definēšanas pievienojiet dragstart notikumu apdarinātāju, lai sāktu DnD secību katrai kolonnai.
Šis kods iestatīs kolonnas necaurspīdīgumu uz 40%, kad lietotājs sāks vilkt, un pēc tam atgriezīs to uz 100% vilkšanas notikuma beigās.
Rezultātus var redzēt zemāk esošajā Glitch demonstrācijā. Velciet vienumu, un tas kļūs necaurspīdīgs. Tā kā dragstart notikums ir vērsts uz avota elementu, iestatot this.style.opacity uz 40%, lietotājam tiek sniegta vizuāla atgriezeniskā saite par to, ka pašlaik atlasītais elements tiek pārvietots. Pēc vienuma ievietošanas avota elements atgriežas 100% necaurspīdīgumā, lai gan izvietojuma funkcija vēl nav uzrakstīta.
Izmantojiet dragenter, dragover un dragleave, lai pievienotu papildu vizuālas norādes
Lai palīdzētu lietotājiem saprast, kā mijiedarboties ar interfeisu, izmantojiet dragenter, dragover un dragleave notikumu apdarinātājus. Nākamajā piemērā kolonnas var vilkt vai atlasīt mērķauditoriju. Lai palīdzētu lietotājiem to saprast, kad lietotājs velk vienumu gar kolonnu, šīs kolonnas apmale kļūst par punktētu līniju. Piemēram, CSS varat izveidot over klasi, lai attēlotu elementu, kas ir izvietojuma mērķis.
Pēc tam iestatiet notikumu apdarinātāju JavaScript, lai pievienotu over klasi, velkot garām kolonnai, un noņemtu to, izejot no kolonnas. Vilkšanas apdarinātājā mēs arī vēlamies pārliecināties, ka klase tiek noņemta vilkšanas beigās.
Šajā kodā ir jāpiemin daži punkti:
Velkot elementu, piemēram, saiti, ir jābloķē pārlūkprogrammas noklusējuma darbība, proti, naviģēt uz šo saiti. Lai to izdarītu, izsauciet e.preventDefault() vilkšanas notikumā. Vēl viena laba prakse ir atgriezt false tajā pašā apdarinātājā.
Izmantojiet dragenter notikumu apdarinātāju, lai pārslēgtu klases, nevis dragover. Ja izmantojat dragover, CSS klase tiek pārslēgta vairākas reizes, jo notikuma dragover turpina aktivizēties, kad kolonna tiek virzīta. Galu galā tas liks pārlūkprogrammas renderētājam veikt daudz nevajadzīgu darbu. Vislabāk ir vienmēr samazināt pārzīmēšanu līdz minimumam. Ja kāda iemesla dēļ ir nepieciešams izmantot dragover notikumus, apsveriet iespēju ierobežot vai noņemt notikumu klausītājus.
Pabeigt izvietojumu
Lai apstrādātu faktisko izvietojumu, pievienojiet nomešanas notikuma notikuma klausītāju. Nomešanas apdarinātājā jums ir jābloķē pārlūkprogrammas noklusējuma izvietojuma uzvedība, kas parasti ir sava veida kaitinoša novirzīšana. e.stopPropagation() var izsaukt, lai novērstu notikuma aktivizēšanu DOM.
Pārliecinieties, ka jaunais apdarinātājs ir reģistrēts citā apdarinātājā:
Ja šobrīd palaižat kodu, projekts netiks novietots jaunā vietā. Lai to panāktu, jāizmanto DataTransfer objekts.
Rekvizīts dataTransfer ir vieta, kur notiek visi DnD brīnumi. Tas saglabā vilkšanas operācijā nosūtītos datu fragmentus. dataTransfer tiek iestatīts dragstart notikumā un tiek nolasīts/apstrādāts nomešanas notikumā. Izsauciet e.dataTransfer.setData(mimeType, dataPayload), lai iestatītu objekta MIME tipu un datu lietderīgo slodzi.
Tālāk sniegtajā piemērā mēs ļausim lietotājiem pārkārtot kolonnu secību. Lai to izdarītu, vispirms vilkšanas sākumā jāsaglabā avota elementa HTML:
Apstrādājiet kolonnas izvietojumu nomešanas notikumā, iestatiet avota kolonnas HTML uz mērķa kolonnas HTML, kurā tā ir ievietota, vispirms pārbaudiet, vai mērķa kolonna, ko velk un nomet lietotājs, ir tāda pati kā avota kolonna.
Citi vilkšanas rekvizīti
Objekts dataTransfer atklāj rekvizītus, kas tiek izmantoti, lai vilkšanas procesa laikā lietotājam sniegtu vizuālu atgriezenisko saiti. Šos rekvizītus var izmantot arī, lai kontrolētu, kā katrs izvietojuma mērķis reaģē uz noteiktiem datu tipiem.
- dataTransfer.effectAllowed ierobežo vilkšanas veidu, ko lietotājs var veikt elementam. To izmanto vilkšanas un nomešanas apstrādes modelī, lai inicializētu dropEffect vilkšanas un vilkšanas notikumu laikā. Šo rekvizītu var iestatīt uz šādām vērtībām: none, copy, copyLink, copyMove, link, linkMove, move, all un uninitialized.
- dataTransfer.dropEffect kontrolē lietotājam sniegtās atsauksmes dragenter un dragover notikumu laikā. Kad lietotājs novieto kursoru virs mērķa elementa, pārlūkprogrammas kursors norāda veicamās darbības veidu (piemēram, kopēt, pārvietot utt.). Efekts var būt viena no šādām vērtībām: nav, copy, link, move.
- e.dataTransfer.setDragImage(imgElement, x, y) norāda, ka pārlūkprogrammas noklusējuma "spoku attēla" atsauksmes netiek izmantotas, un tā vietā ir iespēja iestatīt vilkšanas ikonu.
Failu augšupielāde, velkot un nometot
Šajā vienkāršajā piemērā kolonna tiek izmantota kā vilkšanas avots un vilkšanas mērķis. Tas var būt redzams lietotāja interfeisā, kad lietotājam tiek lūgts pārkārtot vienumus. Dažos gadījumos mērķa vilkšana un avota vilkšana var būt atšķirīga, piemēram, saskarnē, kur lietotājam ir jāizvēlas attēls kā produkta galvenais attēls, velkot atlasīto attēlu uz mērķi.
Vilkšana un nomešana bieži tiek izmantota, lai lietotāji varētu vilkt vienumus no darbvirsmas uz programmu. Galvenā atšķirība ir pilienu apstrādātājs. Neizmantojot dataTransfer.getData(), lai piekļūtu failam, faila dati tiks iekļauti rekvizītā dataTransfer.files:
Oriģinālā saite:Hipersaites pieteikšanās ir redzama.
|
Publicēts 2022-4-26 10:30:50
|
|
|
|
Publicēts 2022-4-26 21:27:25
|
