Допоможіть розробці сайту, ділитися статтею з друзями!

Вступ до js drag and drop

Node.js надає функцію Vue.js з різними опціями для користувача, як-от перетягування, за допомогою якого ми передаємо дані з одного місця в інше, що означає перетягування. Він забезпечує інтерактивний спосіб для користувача маніпулювати своїми даними. Коли ми додаємо до вашого проекту функцію перетягування, це чудовий спосіб зробити додаток природним і зручним для користувачів. Він надає користувачам різні типи API для реалізації функцій перетягування, таких як перетягування, перетягування, перетягування, драгентер, перетягування, перетягування та скидання тощо.Для реалізації перетягування нам потрібен об’єкт dataTransfer.

Синтаксис

1. Перетягніть

startDrag: (подія , продукт)
{
event.dataTransfer.dropEffect=«перемістити»
event.dataTransfer.effectAllowed=«переміщення»
event.dataTransfer.setData(‘productID’, product.id)
}

Пояснення

У наведеному вище синтаксисі перетягування нам потрібно зберегти ідентифікатор продукту, і ми перетягуємо, використовуючи функціональність dataTransfer, і ми також згадуємо, що тут буде переміщено подію перетягування.

2. Скинь

onDrop (подія, продукт)
{
Const product_ID=event.dataTransfer.getData(‘productID’)
Const product=this.product.find(product=product.id==productID)
product.list=list
}

Пояснення

У наведеному вище синтаксисі ми отримуємо збережений ідентифікатор продукту, щоб ми могли отримати до нього належний доступ.

Як перетягування працює у Vue.js?

  1. Ми повинні встановити Node.js 10.x і вище у вашій системі, і ви можете перевірити, використовуючи команду node -v у вашому терміналі.
  2. Ми повинні встановити останню версію Vue у вашій системі за допомогою команди npm i -g @vue/cli.
  3. Потім створіть проект за допомогою vue для створення назви проекту.
  4. Ми повинні встановити пакети, які можна перетягувати, у ваш проект за допомогою npm i -S vuedraggable.
  5. Нам потрібні базові знання про Node.js.
  6. Нам потрібні базові знання про Vue.js та його компоненти.
  7. За допомогою перетягування Vue.js ми виконуємо різні операції.

Перш ніж пояснити, ми повинні знати подію перетягування, як показано нижче.

Vue.js надає загалом вісім типів подій перетягування в API, і ми можемо реалізувати їх у нашій програмі.

  • Drag: подія перетягування використовується для перетягування елемента.
  • dragstart: подія dragstart використовується для початку перетягування елемента, який можна перетягнути.
  • dragend: подія dragend використовується, щоб показати закінчення перетягування.
  • dragenter: подія dragenter використовується, коли перетягнутий елемент вводиться в зону, яку можна скинути.
  • dragleave: подія dragleave використовується, коли ми залишаємо перетягнутий елемент.
  • dragover: подія dragover, яку ми використовуємо, коли перетягується елемент.
  • drop: подія падіння використовується, коли ми скидали перетягнутий елемент.
  • Об'єкт DataTransfer: Об'єкт dataTransfer є найкориснішим об'єктом в API перетягування. Цей об’єкт дає дозвіл почати перетягування елемента та отримати до нього доступ, коли ми скидаємо його

Властивості об'єкта передачі даних

  • dropEffect: Цей dropEffect використовується для показу поточної операції перетягування.
  • effectAllowed: Це також показує операцію перетягування.
  • setData: Це використовується для додавання значень до об'єктів dataTransfer.
  • getData: Використовується для отримання збережених значень.

Приклад Vue.js Drag and Drop

Для кращого розуміння розглянемо приклади того, як працює перетягування. Спочатку ми створюємо новий проект з іменем dnd, у якому ми створили два різні компоненти, як показано нижче.

Ім'я першого компонента як Table.vue код компонента Table, як показано нижче.

Код:


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

Допоможіть розробці сайту, ділитися статтею з друзями!

Категорія:

Мови програмування