Palīdziet vietnes attīstībai, daloties ar rakstu ar draugiem!

Ievads par js vilkšanu un nomešanu

Node.js nodrošina lietotājam Vue.js funkciju ar dažādām iespējām, piemēram, vilkšanas un nomešanas iespēju, kurā mēs pārsūtām datus no vienas vietas uz citu vietu, kas nozīmē velciet un nometiet. Tas nodrošina interaktīvu veidu, kā lietotājs var manipulēt ar saviem datiem. Ja jūsu projektam pievienojam vilkšanas un nomešanas funkcionalitāti, tas ir lielisks veids, kā padarīt lietojumprogrammu dabisku un lietotājam draudzīgu. Tā nodrošina dažādu veidu API lietotājiem, lai ieviestu vilkšanas un nomešanas funkcijas, piemēram, vilkšanu, vilkšanu, vilkšanu, vilkšanu, vilkšanu, vilkšanu un nomešanu utt.Lai ieviestu vilkšanu un nomešanu, mums bija nepieciešams dataTransfer objekts.

Sintakse

1. Velciet

sāktVelciet: (notikums , produkts)
{
event.dataTransfer.dropEffect='pārvietot'
event.dataTransfer.effectAllowed='pārvietot'
event.dataTransfer.setData('productID', product.id)
}

Paskaidrojums

Iepriekš norādītajā vilkšanas sintaksē mums ir jāsaglabā produkta ID, un mēs veicam vilkšanu, izmantojot datu pārsūtīšanas funkcionalitāti, un mēs arī pieminam, ka vilkšanas notikums tiks pārvietots.

2. Nomest

onDrop (pasākums, produkts)
{
Const product_ID=event.dataTransfer.getData('productID')
Const produkts=this.product.find(product=product.id==productID)
product.list=saraksts
}

Paskaidrojums

Iepriekš norādītajā sintaksē mēs izgūstam saglabātā produkta ID, lai varētu tam pareizi piekļūt.

Kā vilkšana un nomešana darbojas Vue.js?

  1. Mums jūsu sistēmā jāinstalē Node.js 10.x un jaunāka versija, un jūs varat to pārbaudīt, terminālī izmantojot komandu node -v.
  2. Mums jūsu sistēmā jāinstalē jaunākā Vue versija, izmantojot komandu npm i -g @vue/cli.
  3. Pēc tam izveidojiet projektu, izmantojot vue, lai izveidotu projekta nosaukumu.
  4. Mums jūsu projektā jāinstalē vilkamās pakotnes, izmantojot npm i -S vuedraggable.
  5. Mums bija nepieciešamas pamatzināšanas par Node.js.
  6. Mums bija nepieciešamas pamatzināšanas par Vue.js un tā komponentiem.
  7. Ar Vue.js drag and drop palīdzību veicam dažādas darbības.

Pirms skaidrošanas mums ir jāzina vilkšanas un nomešanas notikums, kā norādīts tālāk.

Vue.js nodrošina kopā astoņu veidu vilkšanas un nomešanas notikumus API, un mēs varam tos ieviest savā lietojumprogrammā.

  • Velciet: vilkšanas notikums tiek izmantots, lai vilktu vienumu.
  • dragstart: vilkšanas sākšanas notikums tiek izmantots, lai sāktu velkama vienuma vilkšanu.
  • dragend: dragend notikumu izmanto, lai parādītu vilkšanas galus.
  • dragenter: vilkšanas notikums tiek izmantots, kad vilktais vienums tiek ievadīts nolaižamajā zonā.
  • dragleave: dragleave notikums tiek izmantots, kad atstājam ievilktu vienumu.
  • dragover: vilkšanas notikums, ko mēs izmantojam, kad tiek pārvietots vilktais vienums.
  • drop: nomešanas notikums tiek izmantots, kad mēs nometām ievilkto vienumu.
  • dataTransfer Object: DataTransfer objekts ir visnoderīgākais vilkšanas un nomešanas API objekts. Šis objekts dod atļauju sākt vilkt vienumu un piekļūt tiem, kad mēs nolaižam pilienu

Datu pārsūtīšanas objekta rekvizīti

  • dropEffect: Šis dropEffect tiek izmantots, lai parādītu notiekošo vilkšanas un nomešanas darbību.
  • effectAllowed: tiek parādīta arī vilkšanas un nomešanas darbība.
  • setData: To izmanto, lai pievienotu vērtības datu pārsūtīšanas objektiem.
  • getData: To izmanto, lai izgūtu saglabātās vērtības.

Vue.js piemērs velciet un nometiet

Lai labāk izprastu, aplūkosim piemērus, kā darbojas vilkšana un nomešana. Pirmkārt, mēs izveidojam jaunu projektu ar nosaukumu dnd, kurā mēs izveidojām divus dažādus komponentus šādi.

Pirmā komponenta nosaukums kā Table.vue tabulas komponenta kodu šādi.

Kods:


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

Palīdziet vietnes attīstībai, daloties ar rakstu ar draugiem!

Kategorija:

Programmēšanas valodas