Pomagajte razvoju spletnega mesta, delite članek s prijatelji!

Uvod v js povleci in spusti

Node.js uporabniku ponuja funkcijo Vue.js z različnimi možnostmi, kot je funkcija povleci in spusti, v kateri prenašamo podatke z ene lokacije na drugo lokacijo, kar pomeni povleci in spusti. Zagotavlja interaktivni način, da uporabnik manipulira s svojimi podatki. Ko vašemu projektu dodamo funkcijo povleci in spusti, je to odličen način, da naredimo aplikacijo naravno in uporabniku prijazno. Uporabnikom ponuja različne vrste API-jev za implementacijo funkcij povleci in spusti, kot so povleci, povleci, povleci, dragenter, dragleave, dragover in spusti itd.Za izvedbo povleci in spusti smo potrebovali objekt DataTransfer.

Sintaksa

1. Povlecite

startDrag: (dogodek , izdelek)
{
event.dataTransfer.dropEffect='premik'
event.dataTransfer.effectAllowed='premik'
event.dataTransfer.setData(‘productID’, product.id)
}

Pojasnilo

V zgornji sintaksi vlečenja moramo shraniti ID izdelka in vlečemo s funkcijo dataTransfer in tukaj omenjamo tudi, da bo dogodek vlečenja premaknjen.

2. Spusti

onDrop (dogodek, izdelek)
{
Const product_ID=event.dataTransfer.getData(‘productID’)
Konstantni izdelek=this.product.find(product=product.id==productID)
product.list=seznam
}

Pojasnilo

V zgornji sintaksi pridobimo shranjeni ID izdelka, da lahko do njega pravilno dostopamo.

Kako deluje povleci in spusti v Vue.js?

  1. Na vaš sistem moramo namestiti Node.js 10.x in novejše in to lahko preverite z ukazom node -v v vašem terminalu.
  2. Na vaš sistem moramo namestiti najnovejšo različico Vue z uporabo ukaza npm i -g @vue/cli.
  3. Potem ustvarite projekt z uporabo vue, da ustvarite ime projekta.
  4. Pakete, ki jih je mogoče povleči, moramo namestiti v vaš projekt z uporabo npm i -S vuedraggable.
  5. Potrebovali smo osnovno znanje o Node.js.
  6. Potrebovali smo osnovno znanje o Vue.js in njegovih komponentah.
  7. S pomočjo povleci in spusti Vue.js izvajamo različne operacije.

Preden razložimo, moramo poznati dogodek povleci in spusti, kot sledi.

Vue.js ponuja skupno osem vrst dogodkov povleci in spusti v API in jih lahko implementiramo v našo aplikacijo.

  • Drag: Dogodek vlečenja se uporablja za vlečenje predmeta.
  • dragstart: Dogodek dragstart se uporablja za začetek vlečenja predmeta, ki ga je mogoče povleči.
  • dragend: Dogodek dragend se uporablja za prikaz konca vlečenja.
  • dragenter: Dogodek dragenter se uporablja, ko se vlečeni predmet vnese v območje, ki ga je mogoče spustiti.
  • dragleave: dogodek dragleave se uporablja, ko zapustimo vlečen predmet.
  • dragover: Dragover dogodek, ki ga uporabimo, ko se premakne vlečeni predmet.
  • drop: Dogodek spuščanja se uporablja, ko smo spustili vlečeni predmet.
  • predmet prenosa podatkov: Prenos podatkov je najbolj uporaben predmet v API-ju za povleci in spusti. Ta predmet daje dovoljenje za začetek vlečenja predmeta in dostop do njega, ko spustimo v spust

Lastnosti predmeta prenosa podatkov

  • dropEffect: Ta dropEffect se uporablja za prikaz potekajoče operacije povleci in spusti.
  • effectAllowed: To prikazuje tudi operacijo povleci in spusti.
  • setData: To se uporablja za dodajanje vrednosti predmetom dataTransfer.
  • getData:Uporablja se za pridobivanje shranjenih vrednosti.

Primer povleci in spusti Vue.js

Oglejmo si primere delovanja povleci in spusti za boljše razumevanje. Najprej ustvarimo nov projekt z imenom dnd, v katerem smo ustvarili dve različni komponenti, kot sledi.

Ime prve komponente kot Table.vue kodo komponente tabele, kot sledi.

Koda:


":id=id
""razred=tabela
"@dragover.prevent
"@drop.prevent=drop
">

Pomagajte razvoju spletnega mesta, delite članek s prijatelji!

Kategorija:

Programski jeziki