Help de ontwikkeling van de site en deelt het artikel met vrienden!

Inleiding tot js slepen en neerzetten

The Node.js biedt een Vue.js-functie met verschillende opties voor de gebruiker, zoals slepen en neerzetten, waarbij we gegevens van de ene locatie naar een andere locatie overbrengen, wat slepen en neerzetten betekent. Het biedt een interactieve manier voor de gebruiker om hun gegevens te manipuleren. Wanneer we functionaliteit voor slepen en neerzetten aan uw project toevoegen, is dit een geweldige manier om de applicatie natuurlijk en gebruiksvriendelijk te maken. Het biedt gebruikers verschillende soorten API's om functies voor slepen en neerzetten te implementeren, zoals slepen, slepen, starten, dragend, dragenter, slepen, slepen en neerzetten, enz.Om slepen en neerzetten te implementeren, hadden we een dataTransfer-object nodig.

Syntaxis

1. Sleep

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

Uitleg

In de bovenstaande sleepsyntaxis moeten we de id van het product opslaan en we slepen met behulp van de dataTransfer-functionaliteit en we vermelden hier ook dat de sleepgebeurtenis zal worden verplaatst.

2. Drop

onDrop (evenement, product)
{
Const product_ID=event.dataTransfer.getData(‘productID’)
Const product=dit.product.find(product=product.id==productID)
product.list=lijst
}

Uitleg

In de bovenstaande syntaxis halen we de opgeslagen product-ID op zodat we er op de juiste manier toegang toe hebben.

Hoe werkt slepen en neerzetten in Vue.js?

  1. We moeten Node.js 10.x en hoger op uw systeem installeren en u kunt dit verifiëren door het node -v commando in uw terminal te gebruiken.
  2. We moeten de nieuwste versie van Vue op uw systeem installeren met behulp van de opdracht npm i -g @vue/cli.
  3. Maak vervolgens het project door vue te gebruiken om een projectnaam aan te maken.
  4. We moeten de versleepbare pakketten in uw project installeren met behulp van npm i -S vuedraggable.
  5. We hadden basiskennis nodig over Node.js.
  6. We hadden basiskennis nodig over Vue.js en zijn componenten.
  7. Met behulp van Vue.js slepen en neerzetten, voeren we verschillende bewerkingen uit.

Voordat we gaan uitleggen, moeten we het Drag and Drop Event als volgt kennen.

Vue.js biedt in totaal acht soorten slepen en neerzetten in de API en we kunnen ze in onze applicatie implementeren.

  • Drag: De sleepgebeurtenis wordt gebruikt om het item te slepen.
  • dragstart: De dragstart-gebeurtenis wordt gebruikt om een versleepbaar item te slepen.
  • dragend: De gebeurtenis dragend wordt gebruikt om de sleep-ends te tonen.
  • dragenter: De gebeurtenis dragenter wordt gebruikt wanneer een gesleept item wordt ingevoerd in een droppable zone.
  • dragleave: De dragleave-gebeurtenis wordt gebruikt wanneer we een gesleept item verlaten.
  • dragover: De dragover-gebeurtenis die we gebruiken wanneer een gesleept item wordt verplaatst.
  • drop: De drop-gebeurtenis wordt gebruikt wanneer we het gesleepte item neerzetten.
  • dataTransfer Object: Het dataTransfer-object is het meest bruikbare object in de API voor slepen en neerzetten. Dit object geeft toestemming om een item te slepen en er toegang toe te krijgen wanneer we het in de drop laten vallen

Eigenschappen van dataTransfer Object

  • dropEffect: Dit dropEffect wordt gebruikt om de lopende slepen-en-neerzetten-bewerking te tonen.
  • effectAllowed: Dit toont ook het slepen en neerzetten.
  • setData: Dit wordt gebruikt om waarden toe te voegen aan dataTransfer-objecten.
  • getData: Het wordt gebruikt om opgeslagen waarden op te halen.

Voorbeeld van Vue.js slepen en neerzetten

Laten we voorbeelden bekijken van hoe slepen en neerzetten werkt voor een beter begrip. Eerst maken we een nieuw project met een naam als dnd waarin we als volgt twee verschillende componenten hebben gemaakt.

Eerste componentnaam als Table.vue de code van Table-component als volgt.

Code:


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

Help de ontwikkeling van de site en deelt het artikel met vrienden!

Categorie:

Programmeertalen