Hjelp utviklingen av nettstedet, del artikkelen med venner!

Introduksjon til js dra og slipp

Node.js tilbyr en Vue.js-funksjon med forskjellige alternativer for brukeren som dra og slipp-funksjon der vi overfører data fra ett sted til et annet sted, som betyr dra og slipp. Det gir en interaktiv måte for brukeren å manipulere dataene sine. Når vi legger til dra og slipp-funksjonalitet til prosjektet ditt, er det en fin måte å gjøre applikasjonen naturlig og brukervennlig på. Det gir forskjellige typer API til brukere for å implementere dra-og-slipp-funksjonalitet som dra, drastart, dragend, dragenter, dragleave, dragover og drop, etc.For å implementere dra og slipp trengte vi et dataoverføringsobjekt.

Syntaks

1. Dra

startDrag: (hendelse , produkt)
{
event.dataTransfer.dropEffect=‘move’
event.dataTransfer.effectAllowed=‘move’
event.dataTransfer.setData(‘productID’, product.id)
}

Forklaring

I dra-syntaksen ovenfor, må vi lagre ID-en til produktet og vi drar ved å bruke dataTransfer-funksjonaliteten, og vi nevner også at drag-hendelsen vil bli flyttet.

2. Slipp

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

Forklaring

I syntaksen ovenfor henter vi den lagrede produkt-ID-en slik at vi får tilgang til den på riktig måte.

Hvordan fungerer dra og slipp i Vue.js?

  1. Vi må installere Node.js 10.x og nyere på systemet ditt, og du kan verifisere ved å bruke node -v-kommandoen i terminalen din.
  2. Vi må installere den nyeste versjonen av Vue på systemet ditt ved å bruke kommandoen npm i -g @vue/cli.
  3. Opprett deretter prosjektet ved å bruke vue for å lage et prosjektnavn.
  4. Vi må installere de dragbare pakkene i prosjektet ditt ved å bruke npm i -S vuedraggable.
  5. Vi krevde grunnleggende kunnskap om Node.js.
  6. Vi krevde grunnleggende kunnskap om Vue.js og dets komponenter.
  7. Ved hjelp av Vue.js dra og slipp utfører vi forskjellige operasjoner.

Før vi forklarer, må vi kjenne Dra og slipp-hendelsen som følger.

Vue.js tilbyr tot alt åtte typer dra-og-slipp-hendelser i API-en, og vi kan implementere dem i applikasjonen vår.

  • Drag: Dra-hendelsen brukes til å dra elementet.
  • dragstart: Drastart-hendelsen brukes til å begynne å dra et element som kan dras.
  • dragend: Dragend-hendelsen brukes til å vise dragendene.
  • dragenter: Dragenter-hendelsen brukes når et trukket element legges inn i en slippbar sone.
  • dragleave: Dragleave-hendelsen brukes når vi legger igjen et trukket element.
  • dragover: Draover-hendelsen vi bruker når et element flyttes.
  • drop: Drop-hendelsen brukes når vi droppet det drade elementet.
  • dataTransfer Object: DataTransfer-objektet er det mest nyttige objektet i dra-og-slipp-APIet. Dette objektet gir tillatelse til å begynne å dra et element og få tilgang til det når vi slipper i slipp

Properties of data Transfer Object

  • dropEffect: Denne dropEffecten brukes til å vise pågående dra-og-slipp-operasjoner.
  • effectAllowed: Dette viser også dra-og-slipp-operasjonen.
  • setData: Dette brukes til å legge til verdier til dataTransfer-objekter.
  • getData: Den brukes til å hente lagrede verdier.

Eksempel på Vue.js Dra og slipp

La oss se eksempler på hvordan dra og slipp fungerer for en bedre forståelse. Først lager vi et nytt prosjekt med navn som dnd, der vi opprettet to forskjellige komponenter som følger.

Første komponentnavn som Table.vue koden til Tabellkomponenten som følger.

Kode:


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

Hjelp utviklingen av nettstedet, del artikkelen med venner!

Kategori:

Programmerings språk