Padėkite kurti svetainę ir pasidalykite straipsniu su draugais!

Įvadas į „js drag and drop“

Node.js suteikia vartotojui Vue.js funkciją su įvairiomis parinktimis, pvz., vilkimo ir nuleidimo funkciją, kurioje duomenis perkeliame iš vienos vietos į kitą, o tai reiškia, kad nuvilkite ir numeskite. Tai suteikia vartotojui interaktyvų būdą manipuliuoti savo duomenimis. Kai prie projekto pridedame vilkimo ir numetimo funkciją, tai puikus būdas padaryti programą natūralią ir patogią naudoti. Ji suteikia vartotojams įvairių tipų API, kad galėtų įgyvendinti vilkimo ir nuleidimo funkcijas, tokias kaip vilkimas, paleidimas, vilkimas, vilkimas, vilkimas, vilkimas ir nuleidimas ir kt.Norint įgyvendinti nuvilkimą, mums reikėjo duomenų perdavimo objekto.

Sintaksė

1. Vilkite

pradžia Vilkite: (įvykis , produktas)
{
event.dataTransfer.dropEffect='perkelti'
event.dataTransfer.effectAllowed='perkelti'
event.dataTransfer.setData('productID', product.id)
}

Paaiškinimas

Aukščiau pateiktoje vilkimo sintaksėje turime išsaugoti produkto ID ir vilkime naudodami duomenų perdavimo funkciją, taip pat čia minime, kad vilkimo įvykis bus perkeltas.

2. Nuleisti

onDrop (įvykis, produktas)
{
Const product_ID=event.dataTransfer.getData(‘productID’)
Const produktas=this.product.find(product=product.id==productID)
product.list=sąrašas
}

Paaiškinimas

Aukščiau pateiktoje sintaksėje gauname saugomo produkto ID, kad galėtume jį tinkamai pasiekti.

Kaip nuvilkimas veikia Vue.js?

  1. Turime įdiegti Node.js 10.x ir naujesnes versijas jūsų sistemoje ir galite tai patikrinti naudodami komandą node -v savo terminale.
  2. Turime įdiegti naujausią Vue versiją jūsų sistemoje naudodami komandą npm i -g @vue/cli.
  3. Tada sukurkite projektą naudodami vue, kad sukurtumėte projekto pavadinimą.
  4. Turime įdiegti tempiamus paketus jūsų projekte naudodami npm i -S vuedraggable.
  5. Mums reikėjo pagrindinių žinių apie Node.js.
  6. Mums reikėjo pagrindinių žinių apie Vue.js ir jo komponentus.
  7. Naudodami Vue.js drag and drop, atliekame įvairias operacijas.

Prieš aiškindami, turime žinoti vilkimo ir numetimo įvykį, kaip nurodyta toliau.

Vue.js API teikia iš viso aštuonių tipų nuvilkimo įvykius ir galime juos įdiegti savo programoje.

  • Drag: vilkimo įvykis naudojamas elementui vilkti.
  • dragstart: vilkimo pradžios įvykis naudojamas vilkimo elemento vilkimui pradėti.
  • dragend: dragend įvykis naudojamas vilkimo galams parodyti.
  • dragentas: vilkimo įvykis naudojamas, kai nuvilktas elementas įvedamas į nuleidžiamą zoną.
  • dragleave: dragleave įvykis naudojamas, kai paliekame nuvilktą elementą.
  • dragover: vilkimo įvykis, kurį naudojame, kai perkeliamas nuvilktas elementas.
  • drop: Numetimo įvykis naudojamas, kai numetame nutemptą elementą.
  • duomenų perdavimo objektas: DataTransfer objektas yra naudingiausias vilkimo API objektas. Šis objektas suteikia leidimą pradėti vilkti elementą ir pasiekti juos, kai patenkame į lašą

Duomenų perdavimo objekto ypatybės

  • dropEffect: Šis dropEffect naudojamas norint parodyti vykdomą vilkimo ir nuleidimo operaciją.
  • effectAllowed: taip pat rodoma vilkimo operacija.
  • setData: Tai naudojama duomenų perdavimo objektams pridėti vertėms.
  • getData: Jis naudojamas išsaugotoms reikšmėms gauti.

Vue.js pavyzdys Vilkite ir numeskite

Pažiūrėkime, kaip veikia vilkimas ir numetimas, kad geriau suprastumėte. Pirmiausia sukuriame naują projektą pavadinimu dnd, kuriame sukūrėme du skirtingus komponentus, kaip nurodyta toliau.

Pirmojo komponento pavadinimas kaip Table.vue Table komponento kodą taip.

Kodas:


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

Padėkite kurti svetainę ir pasidalykite straipsniu su draugais!

Kategorija:

Programavimo kalbos