Pomozte vývoji webu a sdílení článku s přáteli!

Úvod do js drag and drop

Node.js poskytuje uživateli funkci Vue.js s různými možnostmi, jako je drag and drop, ve kterém přenášíme data z jednoho místa na druhé, což znamená přetahování. Poskytuje uživateli interaktivní způsob, jak manipulovat se svými daty. Když do vašeho projektu přidáme funkci drag and drop, je to skvělý způsob, jak učinit aplikaci přirozenou a uživatelsky přívětivou. Poskytuje uživatelům různé typy rozhraní API pro implementaci funkcí přetažení, jako je přetažení, přetažení, přetažení, přetažení, přetažení, přetažení a přetažení atd.K implementaci drag and drop jsme potřebovali objekt dataTransfer.

Syntaxe

1. Přetáhnout

startDrag: (událost, produkt)
{
event.dataTransfer.dropEffect=‚přesunout‘
event.dataTransfer.effectAllowed=‚přesunout‘
event.dataTransfer.setData(‘productID’, product.id)

Vysvětlení

Ve výše uvedené syntaxi přetažení potřebujeme uložit ID produktu a přetahujeme pomocí funkce dataTransfer a také zde zmiňujeme, že událost přetažení bude přesunuta.

2. Drop

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

Vysvětlení

Ve výše uvedené syntaxi získáváme uložené ID produktu, abychom k němu měli správný přístup.

Jak funguje drag and drop ve Vue.js?

  1. Musíme do vašeho systému nainstalovat Node.js 10.xa vyšší a můžete to ověřit pomocí příkazu node -v ve vašem terminálu.
  2. Musíme nainstalovat nejnovější verzi Vue do vašeho systému pomocí příkazu npm i -g @vue/cli.
  3. Poté vytvořte projekt pomocí vue k vytvoření názvu projektu.
  4. Musíme nainstalovat přetahovatelné balíčky do vašeho projektu pomocí npm i -S vuedraggable.
  5. Požadovali jsme základní znalosti o Node.js.
  6. Potřebovali jsme základní znalosti o Vue.js a jeho komponentách.
  7. S pomocí přetažení Vue.js provádíme různé operace.

Než vysvětlíme, musíme znát událost Drag and Drop následovně.

Vue.js poskytuje celkem osm typů drag and drop událostí v API a můžeme je implementovat do naší aplikace.

  • Drag: Událost přetažení se používá k přetažení položky.
  • dragstart: Událost dragstart se používá k zahájení přetahování přetahovatelné položky.
  • dragend: Událost dragend se používá k zobrazení konce tažení.
  • dragenter: Událost dragenter se používá, když je přetažená položka vložena do oblasti, kterou lze přetáhnout.
  • dragleave: Událost dragleave se používá, když opustíme přetaženou položku.
  • dragover: Událost přetažení, kterou používáme při přesunutí přetažené položky.
  • drop: Událost upuštění se použije, když upustíme přetaženou položku.
  • Objekt dataTransfer: Objekt dataTransfer je nejužitečnějším objektem v rozhraní API pro přetahování. Tento objekt uděluje oprávnění začít přetahovat položku a přistupovat k nim, když je spustíme

Vlastnosti objektu přenosu dat

  • dropEffect: Tento dropEffect se používá k zobrazení probíhající operace přetažení.
  • effectAllowed: Zde se také zobrazuje operace přetažení.
  • setData: Slouží k přidávání hodnot do objektů přenosu dat.
  • getData: Slouží k načtení uložených hodnot.

Příklad Vue.js Drag and Drop

Pojďme se podívat na příklady toho, jak funguje přetažení pro lepší pochopení. Nejprve vytvoříme nový projekt s názvem dnd, ve kterém jsme vytvořili dvě různé komponenty následovně.

První název komponenty jako Table.vue kód komponenty Table následovně.

Kód:


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

Pomozte vývoji webu a sdílení článku s přáteli!

Kategorie:

Programovací jazyky