Aiuta lo sviluppo del sito, condividendo l'articolo con gli amici!

Introduzione a js drag and drop

Node.js fornisce una funzione Vue.js con diverse opzioni per l'utente, come la funzione di trascinamento della selezione in cui trasferiamo i dati da una posizione a un' altra, il che significa trascinare e rilasciare. Fornisce un modo interattivo per l'utente di manipolare i propri dati. Quando aggiungiamo la funzionalità di trascinamento della selezione al tuo progetto, è un ottimo modo per rendere l'applicazione naturale e facile da usare. Fornisce diversi tipi di API agli utenti per implementare funzionalità di trascinamento della selezione come trascinamento, trascinamento, trascinamento, trascinamento, trascinamento, trascinamento, trascinamento e rilascio, ecc.Per implementare il drag and drop abbiamo richiesto un oggetto dataTransfer.

Sintassi

1. Trascina

startDrag: (evento, prodotto)
{
event.dataTransfer.dropEffect='sposta'
event.dataTransfer.effectAllowed='sposta'
event.dataTransfer.setData('productID', product.id)
}

Spiegazione

Nella sintassi di trascinamento sopra, dobbiamo memorizzare l'ID del prodotto e stiamo trascinando utilizzando la funzionalità di trasferimento dati e menzioniamo anche qui che l'evento di trascinamento verrà spostato.

2. Rilascia

onDrop (evento, prodotto)
{
Const product_ID=event.dataTransfer.getData('productID')
Const product=this.product.find(product=product.id==productID)
product.list=lista
}

Spiegazione

Nella sintassi sopra, recuperiamo l'ID prodotto memorizzato in modo da potervi accedere correttamente.

Come funziona il trascinamento della selezione in Vue.js?

  1. Dobbiamo installare Node.js 10.x e versioni successive sul tuo sistema e puoi verificare usando il comando node -v nel tuo terminale.
  2. Dobbiamo installare l'ultima versione di Vue sul tuo sistema usando il comando npm i -g @vue/cli.
  3. Quindi crea il progetto usando vue per creare un nome di progetto.
  4. Dobbiamo installare i pacchetti trascinabili nel tuo progetto usando npm i -S vuedraggable.
  5. Abbiamo richiesto una conoscenza di base su Node.js.
  6. Abbiamo richiesto una conoscenza di base di Vue.js e dei suoi componenti.
  7. Con l'aiuto del drag and drop di Vue.js, eseguiamo diverse operazioni.

Prima di andare a spiegare dobbiamo conoscere l'evento Drag and Drop come segue.

Vue.js fornisce un totale di otto tipi di eventi di trascinamento della selezione nell'API e possiamo implementarli nella nostra applicazione.

  • Drag: l'evento di trascinamento viene utilizzato per trascinare l'elemento.
  • dragstart: L'evento dragstart viene utilizzato per iniziare a trascinare un elemento trascinabile.
  • dragend: L'evento dragend viene utilizzato per mostrare le estremità del trascinamento.
  • dragenter: L'evento dragenter viene utilizzato quando un oggetto trascinato viene inserito in una zona trascinabile.
  • dragleave: L'evento dragleave viene utilizzato quando lasciamo un oggetto trascinato.
  • dragover: L'evento dragover che usiamo quando un oggetto trascinato viene spostato.
  • drop: L'evento drop viene utilizzato quando abbiamo rilasciato l'elemento trascinato.
  • Oggetto dataTransfer: L'oggetto dataTransfer è l'oggetto più utile nell'API di trascinamento della selezione. Questo oggetto dà il permesso di iniziare a trascinare un elemento e accedervi quando rilasciamo il drop

Proprietà dell'oggetto trasferimento dati

  • dropEffect: questo dropEffect viene utilizzato per mostrare l'operazione di trascinamento della selezione in corso.
  • effectAllowed: mostra anche l'operazione di trascinamento della selezione.
  • setData: Questo è usato per aggiungere valori agli oggetti dataTransfer.
  • getData: È usato per recuperare i valori memorizzati.

Esempio di trascinamento della selezione di Vue.js

Vediamo esempi di come funziona il trascinamento della selezione per una migliore comprensione. Innanzitutto, creiamo un nuovo progetto con un nome come dnd in cui abbiamo creato due diversi componenti come segue.

Nome del primo componente come Table.vue il codice del componente Table come segue.

Codice:


":id=id
""classe=tavolo
"@dragover.prevent
"@drop.prevent=drop
">

Aiuta lo sviluppo del sito, condividendo l'articolo con gli amici!

Categoria:

Linguaggi di programmazione