Ajutați dezvoltarea site -ului, împărtășind articolul cu prietenii!

Introducere în js drag and drop

Node.js oferă utilizatorului o funcție Vue.js cu diferite opțiuni, cum ar fi facilitate de glisare și plasare în care transferăm date dintr-o locație în alta, ceea ce înseamnă glisare și plasare. Acesta oferă utilizatorului o modalitate interactivă de a-și manipula datele. Când adăugăm funcționalitate de glisare și plasare în proiectul dvs., este o modalitate excelentă de a face aplicația naturală și ușor de utilizat. Oferă utilizatorilor diferite tipuri de API pentru a implementa funcționalități de tragere și plasare, cum ar fi drag, dragstart, dragend, dragenter, dragleave, dragover și drop etc.Pentru a implementa drag and drop, am avut nevoie de un obiect de transfer de date.

Sintaxă

1. Trage

startTrasați: (eveniment , produs)
{
event.dataTransfer.dropEffect=„mutare”
event.dataTransfer.effectAllowed=„mutare”
event.dataTransfer.setData(‘productID’, product.id)
}

Explicația

În sintaxa de glisare de mai sus, trebuie să stocăm id-ul produsului și tragem folosind funcționalitatea de transfer de date și menționăm, de asemenea, aici că evenimentul de glisare va fi mutat.

2. Drop

onDrop (eveniment, produs)
{
Const product_ID=event.dataTransfer.getData(‘productID’)
Produs constant=this.product.find(product=product.id==productID)
product.list=list
}

Explicația

În sintaxa de mai sus, recuperăm ID-ul produsului stocat, astfel încât să îl putem accesa corect.

Cum funcționează tragerea și plasarea în Vue.js?

  1. Trebuie să instalăm Node.js 10.x și versiuni ulterioare pe sistemul dvs. și puteți verifica folosind comanda node -v în terminalul dvs.
  2. Trebuie să instalăm cea mai recentă versiune de Vue pe sistemul dvs. utilizând comanda npm i -g @vue/cli.
  3. Apoi creați proiectul utilizând vue pentru a crea un nume de proiect.
  4. Trebuie să instalăm pachetele draggable în proiectul dvs. utilizând npm i -S vuedraggable.
  5. Ne trebuiau cunoștințe de bază despre Node.js.
  6. Ne trebuiau cunoștințe de bază despre Vue.js și componentele sale.
  7. Cu ajutorul trageți și plasați Vue.js, efectuăm diferite operațiuni.

Înainte de a explica, trebuie să cunoaștem evenimentul Drag and Drop după cum urmează.

Vue.js oferă un total de opt tipuri de evenimente drag and drop în API și le putem implementa în aplicația noastră.

  • Drag: evenimentul de tragere este folosit pentru a trage elementul.
  • dragstart: evenimentul dragstart este folosit pentru a începe tragerea unui element care poate fi trasat.
  • dragend: evenimentul dragend este folosit pentru a afișa capetele de tragere.
  • dragenter: evenimentul dragenter este utilizat atunci când un element trasat este introdus într-o zonă care poate fi plasată.
  • dragleave: evenimentul dragleave este folosit atunci când lăsăm un element trasat.
  • dragover: evenimentul dragover pe care îl folosim atunci când un element trasat este mutat.
  • drop: evenimentul de drop este folosit când am aruncat elementul tras.
  • dataTransfer Object: Obiectul dataTransfer este cel mai util obiect din API-ul drag and drop. Acest obiect dă permisiunea de a începe să trageți un element și să-l accesăm atunci când plasăm drop

Proprietăți ale obiectului de transfer de date

  • dropEffect: acest dropEffect este folosit pentru a afișa operația de glisare și plasare în curs.
  • effectAllowed: aceasta arată, de asemenea, operația de glisare și plasare.
  • setData: Acest lucru este folosit pentru a adăuga valori la obiectele de transfer de date.
  • getData: Este folosit pentru a prelua valorile stocate.

Exemplu de glisare și plasare Vue.js

Să vedem exemple despre cum funcționează drag and drop pentru o mai bună înțelegere. Mai întâi, creăm un nou proiect cu un nume ca dnd în care am creat două componente diferite, după cum urmează.

Numele primului component ca tabel. vezi codul componentei tabelului după cum urmează.

Cod:


":id=id
""clasa=masa
"@dragover.prevent
"@drop.prevent=drop
">

Ajutați dezvoltarea site -ului, împărtășind articolul cu prietenii!

Categorie:

Limbaje de programare