Hjælp udviklingen af ​​webstedet med at dele artiklen med venner!

Introduktion til js træk og slip

Node.js giver brugeren en Vue.js-funktion med forskellige muligheder, såsom træk og slip-funktion, hvor vi overfører data fra et sted til et andet, hvilket betyder træk og slip. Det giver en interaktiv måde for brugeren at manipulere deres data. Når vi tilføjer træk og slip funktionalitet til dit projekt, er det en fantastisk måde at gøre applikationen naturlig og brugervenlig. Det giver brugere forskellige typer API til at implementere træk og slip-funktionalitet såsom træk, dragstart, dragend, dragenter, dragleave, dragover og slip osv.For at implementere træk og slip krævede vi et dataoverførselsobjekt.

Syntaks

1. Træk

startTræk: (begivenhed, produkt)
{
event.dataTransfer.dropEffect='flytt'
event.dataTransfer.effectAllowed='flytt'
event.dataTransfer.setData(‘productID’, product.id)
}

Forklaring

I ovenstående træksyntaks skal vi gemme produktets id, og vi trækker ved hjælp af dataoverførselsfunktionaliteten, og vi nævner også her, at trækhændelsen vil blive flyttet.

2. Drop

onDrop (begivenhed, produkt)
{
Const product_ID=event.dataTransfer.getData(‘productID’)
Const product=this.product.find(product=product.id==productID)
product.list=liste
}

Forklaring

I ovenstående syntaks henter vi det lagrede produkt-id, så vi kan få korrekt adgang til det.

Hvordan fungerer træk og slip i Vue.js?

  1. Vi skal installere Node.js 10.x og nyere på dit system, og du kan verificere ved at bruge node -v kommandoen i din terminal.
  2. Vi skal installere den seneste version af Vue på dit system ved at bruge kommandoen npm i -g @vue/cli.
  3. Opret derefter projektet ved at bruge vue til at oprette et projektnavn.
  4. Vi skal installere de trækbare pakker i dit projekt ved at bruge npm i -S vuedraggable.
  5. Vi krævede grundlæggende viden om Node.js.
  6. Vi krævede grundlæggende viden om Vue.js og dets komponenter.
  7. Ved hjælp af Vue.js træk og slip udfører vi forskellige handlinger.

Før vi forklarer, skal vi kende Drag and Drop-begivenheden som følger.

Vue.js giver i alt otte typer træk og slip-hændelser i API'et, og vi kan implementere dem i vores applikation.

  • Træk: Trækhændelsen bruges til at trække elementet.
  • dragstart: Dragstart-begivenheden bruges til at begynde at trække et element, der kan trækkes.
  • dragend: Dragt-begivenheden bruges til at vise træk-enderne.
  • dragenter: Dragenter-begivenheden bruges, når et element, der trækkes, indtastes i en zone, der kan slippes.
  • dragleave: Dragleave-begivenheden bruges, når vi forlader et trukket element.
  • dragover: Den trækhændelse, vi bruger, når et trukket element flyttes.
  • drop: Drop-hændelsen bruges, da vi droppede det slæbte element.
  • dataTransfer Objekt: DataTransfer-objektet er det mest nyttige objekt i træk og slip-API'en. Dette objekt giver tilladelse til at begynde at trække et element og få adgang til det, når vi falder i drop

Egenskaber for dataoverførselsobjekt

  • dropEffect: Denne dropEffect bruges til at vise igangværende træk og slip-handling.
  • effectAllowed: Dette viser også træk og slip-handlingen.
  • setData: Dette bruges til at tilføje værdier til dataTransfer-objekter.
  • getData: Det bruges til at hente lagrede værdier.

Eksempel på Vue.js Træk og slip

Lad os se eksempler på, hvordan træk og slip fungerer for en bedre forståelse. Først opretter vi et nyt projekt med et navn som dnd, hvori vi oprettede to forskellige komponenter som følger.

Første komponentnavn som tabel.vue koden for tabelkomponent som følger.

Kode:


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

Hjælp udviklingen af ​​webstedet med at dele artiklen med venner!

Kategori:

Programmeringssprog