Pomôžte rozvoju stránky a zdieľajte článok s priateľmi!

Úvod do js drag and drop

Node.js poskytuje používateľovi funkciu Vue.js s rôznymi možnosťami, ako je napríklad funkcia drag and drop, v ktorej prenášame údaje z jedného miesta na druhé, čo znamená drag and drop. Poskytuje používateľovi interaktívny spôsob manipulácie s údajmi. Keď do vášho projektu pridáme funkciu drag and drop, je to skvelý spôsob, ako urobiť aplikáciu prirodzenou a užívateľsky prívetivou. Používateľom poskytuje rôzne typy rozhraní API na implementáciu funkcií drag and drop, ako je drag, dragstart, dragend, dragenter, dragleave, dragover a drop atď.Na implementáciu drag and drop sme potrebovali objekt dataTransfer.

Syntax

1. Pretiahnuť

startDrag: (udalosť , produkt)
{
event.dataTransfer.dropEffect=‘presunúť’
event.dataTransfer.effectAllowed=‘presunúť’
event.dataTransfer.setData(‘productID’, product.id)

Vysvetlenie

Vo vyššie uvedenej syntaxi ťahania potrebujeme uložiť ID produktu a ťaháme pomocou funkcie dataTransfer a tiež tu spomíname, že sa presunie udalosť ťahania.

2. Drop

onDrop (udalosť, produkt)
{
Const product_ID=event.dataTransfer.getData(‘productID’)
Konšt. produkt=this.product.find(product=product.id==productID)
product.list=list

Vysvetlenie

Vo vyššie uvedenej syntaxi získavame uložené ID produktu, aby sme k nemu mali správny prístup.

Ako funguje drag and drop vo Vue.js?

  1. Do vášho systému musíme nainštalovať Node.js 10.xa novší a overiť to môžete pomocou príkazu node -v vo vašom termináli.
  2. Musíme nainštalovať najnovšiu verziu Vue do vášho systému pomocou príkazu npm i -g @vue/cli.
  3. Potom vytvorte projekt pomocou vue na vytvorenie názvu projektu.
  4. Musíme nainštalovať presúvateľné balíky do vášho projektu pomocou npm i -S vuedraggable.
  5. Požadovali sme základné znalosti o Node.js.
  6. Požadovali sme základné znalosti o Vue.js a jeho komponentoch.
  7. Pomocou Vue.js drag and drop vykonávame rôzne operácie.

Pred vysvetlením musíme poznať udalosť Drag and Drop nasledovne.

Vue.js poskytuje celkovo osem typov udalostí drag and drop v rozhraní API a môžeme ich implementovať do našej aplikácie.

  • Drag: Udalosť potiahnutia sa používa na pretiahnutie položky.
  • dragstart: Udalosť dragstart sa používa na začatie presúvania položky, ktorú možno presunúť.
  • dragend: Udalosť ťahania sa používa na zobrazenie koncov ťahania.
  • dragenter: Udalosť dragenter sa používa, keď je presunutá položka zadaná do oblasti, v ktorej sa dá presunúť.
  • dragleave: Udalosť dragleave sa používa, keď opustíme pretiahnutú položku.
  • dragover: Udalosť presunutia, ktorú používame, keď sa presunie ťahaná položka.
  • drop: Udalosť upustenia sa použije, keď presunieme presunutú položku.
  • Objekt dataTransfer: Objekt dataTransfer je najužitočnejším objektom v rozhraní API drag and drop. Tento objekt dáva povolenie začať presúvať položku a pristupovať k nej, keď ju spustíme

Vlastnosti objektu prenosu údajov

  • dropEffect: Tento dropEffect sa používa na zobrazenie prebiehajúcej operácie drag and drop.
  • effectAllowed: Zobrazuje aj operáciu presunutia myšou.
  • setData: Používa sa na pridávanie hodnôt do objektov prenosu údajov.
  • getData: Používa sa na získanie uložených hodnôt.

Príklad Vue.js Drag and Drop

Pozrime sa na príklady toho, ako funguje drag and drop, aby sme to lepšie pochopili. Najprv vytvoríme nový projekt s názvom dnd, v ktorom sme vytvorili dva rôzne komponenty nasledovne.

Prvý názov komponentu ako Table.vue kód komponentu Table takto.

Kód:


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

Pomôžte rozvoju stránky a zdieľajte článok s priateľmi!

Kategórie:

Programovacie jazyky