Hjälp utvecklingen av webbplatsen och dela artikeln med vänner!

Introduktion till js dra och släpp

Node.js tillhandahåller en Vue.js-funktion med olika alternativ för användaren som drag och släpp-funktion där vi överför data från en plats till en annan plats, vilket innebär att dra och släppa. Det ger ett interaktivt sätt för användaren att manipulera sin data. När vi lägger till dra och släpp-funktionalitet i ditt projekt är det ett bra sätt att göra applikationen naturlig och användarvänlig. Det tillhandahåller olika typer av API till användare för att implementera dra och släpp-funktioner som drag, dragstart, dragend, dragenter, dragleave, dragover och drop, etc.För att implementera dra och släpp krävde vi ett dataTransfer-objekt.

Syntax

1. Dra

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

Förklaring

I ovanstående dragsyntax måste vi lagra produktens id och vi drar med hjälp av dataöverföringsfunktionen och vi nämner även här att draghändelsen kommer att flyttas.

2. Släpp

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

Förklaring

I ovanstående syntax hämtar vi det lagrade produkt-id:t så att vi kan komma åt det ordentligt.

Hur fungerar dra och släpp i Vue.js?

  1. Vi måste installera Node.js 10.x och senare på ditt system och du kan verifiera genom att använda kommandot node -v i din terminal.
  2. Vi måste installera den senaste versionen av Vue på ditt system genom att använda kommandot npm i -g @vue/cli.
  3. Skapa sedan projektet genom att använda vue för att skapa ett projektnamn.
  4. Vi måste installera de dragbara paketen i ditt projekt genom att använda npm i -S vuedraggable.
  5. Vi krävde grundläggande kunskaper om Node.js.
  6. Vi krävde grundläggande kunskaper om Vue.js och dess komponenter.
  7. Med hjälp av Vue.js dra och släpp utför vi olika operationer.

Innan vi förklarar måste vi känna till Dra och släpp-händelsen enligt följande.

Vue.js tillhandahåller tot alt åtta typer av dra och släpp-händelser i API:t och vi kan implementera dem i vår applikation.

  • Drag: Drahändelsen används för att dra objektet.
  • dragstart: Dragstart-händelsen används för att börja dra ett objekt som kan dras.
  • dragend: Händelsen dragend används för att visa dragsluten.
  • dragenter: Dragenter-händelsen används när ett draget objekt läggs in i en släppbar zon.
  • dragleave: Dragleave-händelsen används när vi lämnar ett draget objekt.
  • dragover: Den dragover-händelse vi använder när ett draget objekt flyttas.
  • drop: Drop-händelsen används när vi släppte det släpade objektet.
  • dataTransfer Objekt: DataTransfer-objektet är det mest användbara objektet i dra-och-släpp-API:et. Detta objekt ger tillåtelse att börja dra ett objekt och komma åt dem när vi släpper i släpp

Egenskaper för dataöverföringsobjekt

  • dropEffect: Denna dropEffect används för att visa pågående dra-och-släpp-operationer.
  • effectAllowed: Detta visar också dra och släpp-operationen.
  • setData: Detta används för att lägga till värden till dataTransfer-objekt.
  • getData: Det används för att hämta lagrade värden.

Exempel på Vue.js Dra och släpp

Låt oss se exempel på hur dra och släpp fungerar för en bättre förståelse. Först skapar vi ett nytt projekt med namnet dnd där vi skapade två olika komponenter enligt följande.

Första komponentnamnet som Table.vue koden för Tabellkomponenten enligt följande.

Kod:


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

Hjälp utvecklingen av webbplatsen och dela artikeln med vänner!

Kategori:

Programmeringsspråk