Pomozite razvoju web mjesta, dijelite članak s prijateljima!

Uvod u js povuci i ispusti

Node.js pruža Vue.js funkciju s različitim opcijama za korisnika kao što je povlačenje i ispuštanje u kojem prenosimo podatke s jednog mjesta na drugo mjesto, što znači povuci i ispusti. Pruža interaktivni način na koji korisnik može manipulirati svojim podacima. Kada vašem projektu dodamo funkciju povlačenja i ispuštanja, to je izvrstan način da aplikaciju učinite prirodnom i prilagođenom korisniku. Korisnicima pruža različite vrste API-ja za implementaciju funkcija povlačenja i ispuštanja kao što su povlačenje, povlačenje, dragend, dragenter, dragleave, dragover i ispuštanje itd.Za implementaciju povlačenja i ispuštanja potreban nam je objekt DataTransfer.

Sintaksa

1. Povucite

startDrag: (događaj , proizvod)
{
event.dataTransfer.dropEffect='premjesti'
event.dataTransfer.effectAllowed='premjestiti'
event.dataTransfer.setData('productID', product.id)
}

Objašnjenje

U gornjoj sintaksi povlačenja, moramo pohraniti id proizvoda i povlačimo pomoću funkcije prijenosa podataka, a ovdje također spominjemo da će događaj povlačenja biti premješten.

2. Ispustite

onDrop (događaj, proizvod)
{
Const product_ID=event.dataTransfer.getData('productID')
Konstantni proizvod=this.product.find(product=product.id==productID)
product.list=list
}

Objašnjenje

U gornjoj sintaksi dohvaćamo pohranjeni ID proizvoda kako bismo mu mogli ispravno pristupiti.

Kako povlačenje i ispuštanje funkcionira u Vue.js?

  1. Moramo instalirati Node.js 10.x i novije verzije na vaš sustav i to možete potvrditi korištenjem naredbe node -v u vašem terminalu.
  2. Moramo instalirati najnoviju verziju Vuea na vaš sustav pomoću naredbe npm i -g @vue/cli.
  3. Zatim kreirajte projekt koristeći vue za stvaranje naziva projekta.
  4. Moramo instalirati pakete za povlačenje u vaš projekt pomoću npm i -S vuedraggable.
  5. Trebalo nam je osnovno znanje o Node.js.
  6. Trebalo nam je osnovno znanje o Vue.js-u i njegovim komponentama.
  7. Uz pomoć Vue.js drag and drop, izvodimo različite operacije.

Prije nego što objasnimo moramo znati Drag and Drop događaj kako slijedi.

Vue.js pruža ukupno osam vrsta događaja povlačenja i ispuštanja u API-ju i možemo ih implementirati u našu aplikaciju.

  • Drag: Događaj povlačenja koristi se za povlačenje stavke.
  • dragstart: dragstart događaj se koristi za početak povlačenja stavke koja se može povući.
  • dragend: Događaj dragend se koristi za prikaz završetka povlačenja.
  • dragenter: Događaj dragenter se koristi kada se povučena stavka unese u zonu koja se može ispustiti.
  • dragleave: Događaj dragleave koristi se kada ostavimo povučenu stavku.
  • dragover: Dragover događaj koji koristimo kada je povučena stavka premještena.
  • drop: Događaj ispuštanja koristi se kada ispustimo povučenu stavku.
  • Objekt prijenosa podataka: Objekt prijenosa podataka je najkorisniji objekt u API-ju za povlačenje i ispuštanje. Ovaj objekt daje dopuštenje za početak povlačenja stavke i pristup joj kada ispustimo

Svojstva objekta prijenosa podataka

  • dropEffect: Ovaj dropEffect se koristi za prikaz tekuće operacije povlačenja i ispuštanja.
  • effectAllowed: Ovo također pokazuje operaciju povlačenja i ispuštanja.
  • setData: Ovo se koristi za dodavanje vrijednosti objektima prijenosa podataka.
  • getData: Koristi se za dohvaćanje pohranjenih vrijednosti.

Primjer Vue.js Drag and Drop

Pogledajmo primjere kako funkcionira povlačenje i ispuštanje radi boljeg razumijevanja. Prvo stvaramo novi projekt s imenom dnd u kojem smo kreirali dvije različite komponente kako slijedi.

Naziv prve komponente kao Table.vue kod komponente tablice kako slijedi.

Šifra:


":id=id
""class=table
"@dragover.prevent
"@drop.prevent=drop
">

Pomozite razvoju web mjesta, dijelite članak s prijateljima!

Kategorija:

Programski jezici