Segítsen a webhely fejlesztésében, megosztva a cikket a barátokkal!

A js drag and drop bevezetése

A Node.js egy Vue.js funkciót biztosít különböző opciókkal a felhasználó számára, például drag and drop funkcióval, amelyben adatokat vihetünk át egyik helyről a másikra, ami azt jelenti, hogy fogd és vidd. Interaktív módot biztosít a felhasználónak adatai manipulálására. Ha drag and drop funkciót adunk a projekthez, ez nagyszerű módja annak, hogy az alkalmazást természetessé és felhasználóbaráttá tegyük. Különféle típusú API-kat biztosít a felhasználók számára a fogd és vidd funkciók megvalósításához, mint például drag, dragstart, dragend, dragenter, dragleave, dragover, and drop stb.A drag and drop megvalósításához szükségünk volt egy dataTransfer objektumra.

Szintaxis

1. Drag

startHúzás: (esemény , termék)
{
event.dataTransfer.dropEffect='mozgatás'
event.dataTransfer.effectAllowed='mozgatás'
event.dataTransfer.setData(‘termékazonosító’, termék.azonosító)
}

Magyarázat

A fenti drag szintaxisban tárolnunk kell a termék azonosítóját, és a dataTransfer funkciót használva húzzuk, és itt megemlítjük, hogy a drag esemény át lesz helyezve.

2. Drop

onDrop (esemény, termék)
{
Const termék_azonosító=event.dataTransfer.getData(‘termékazonosító’)
Const product=this.product.find(product=product.id==productID)
product.list=lista
}

Magyarázat

A fenti szintaxisban lekérjük a tárolt termékazonosítót, hogy megfelelően hozzáférhessünk.

Hogyan működik a drag and drop a Vue.js-ben?

  1. Telepítenünk kell a Node.js 10.x és újabb verzióját a rendszerére, és ezt a terminál node -v paranccsal ellenőrizheti.
  2. A Vue legújabb verzióját kell telepítenünk a rendszerére az npm i -g @vue/cli paranccsal.
  3. Ezután hozza létre a projektet a vue használatával a projektnév létrehozásához.
  4. Telepítenünk kell a húzható csomagokat a projektben az npm i -S vuedraggable használatával.
  5. Alapismeretekre volt szükségünk a Node.js-ről.
  6. Alapismeretekre volt szükségünk a Vue.js-ről és összetevőiről.
  7. A Vue.js drag and drop segítségével különböző műveleteket hajtunk végre.

Mielőtt elmagyaráznánk, ismernünk kell a Drag and Drop eseményt az alábbiak szerint.

A Vue.js összesen nyolc típusú drag and drop eseményt biztosít az API-ban, és ezeket megvalósíthatjuk az alkalmazásunkban.

  • Drag: A drag esemény az elem húzására szolgál.
  • dragstart: A dragstart esemény a húzható elem húzásának indítására szolgál.
  • dragend: A dragend esemény a húzási végek megjelenítésére szolgál.
  • dragenter: A dragenter esemény akkor használatos, ha egy húzott elemet egy eldobható zónába adnak meg.
  • dragleave: A dragleave esemény akkor használatos, amikor egy húzott elemet elhagyunk.
  • dragover: A dragover esemény, amelyet akkor használunk, amikor egy húzott elemet mozgatunk.
  • drop: A drop esemény akkor használatos, amikor elejtettük a húzott elemet.
  • dataTransfer Object: A dataTransfer objektum a leghasznosabb objektum a drag and drop API-ban. Ez az objektum engedélyt ad egy elem húzásának megkezdésére és azok elérésére, amikor bedobjuk a cseppbe

Az adatátviteli objektum tulajdonságai

  • dropEffect: Ez a dropEffect a folyamatban lévő drag and drop műveletek megjelenítésére szolgál.
  • effectAllowed: Ez a drag and drop műveletet is mutatja.
  • setData: Ezt arra használjuk, hogy értékeket adjunk az adatátviteli objektumokhoz.
  • getData: A tárolt értékek lekérésére szolgál.

Példa a Vue.js Drag and Drop-ra

A jobb megértés érdekében lássunk példákat a fogd és vidd működésére. Először létrehozunk egy új projektet dnd névvel, amelyben két különböző összetevőt hoztunk létre a következőképpen.

Az első komponens neve Table.vue-ként a Table komponens kódját a következőképpen írja be.

Kód:


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

Segítsen a webhely fejlesztésében, megosztva a cikket a barátokkal!

Kategória:

Programozási nyelvek