Помогнете на развитието на сайта, споделяйки статията с приятели!

Въведение в js drag and drop

Node.js предоставя функция Vue.js с различни опции за потребителя, като плъзгане и пускане, при което прехвърляме данни от едно място на друго място, което означава плъзгане и пускане. Той предоставя интерактивен начин за потребителя да манипулира своите данни. Когато добавим функционалност за плъзгане и пускане към вашия проект, това е чудесен начин да направите приложението естествено и удобно за потребителя. Той предоставя различни типове API на потребителите за внедряване на функционалност за плъзгане и пускане, като например плъзгане, плъзгане, дърпане, dragenter, dragleave, dragover и пускане и т.н.За да приложим плъзгане и пускане, се нуждаехме от обект DataTransfer.

Синтаксис

1. Плъзнете

startDrag: (събитие , продукт)
{
event.dataTransfer.dropEffect=‘преместване’
event.dataTransfer.effectAllowed=‘преместване’
event.dataTransfer.setData(‘productID’, product.id)
}

Обяснение

В горния синтаксис за плъзгане трябва да съхраняваме идентификационния номер на продукта и плъзгаме, използвайки функционалността за прехвърляне на данни и също така споменаваме тук събитието с плъзгане ще бъде преместено.

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 изпълняваме различни операции.

Преди да обясним, трябва да знаем събитието Drag and Drop, както следва.

Vue.js предоставя общо осем типа събития с плъзгане и пускане в API и можем да ги внедрим в нашето приложение.

  • Drag: Събитието с плъзгане се използва за плъзгане на елемента.
  • dragstart: Събитието dragstart се използва за започване на плъзгане на елемент, който може да се плъзга.
  • dragend: Събитието dragend се използва за показване на края на плъзгането.
  • dragenter: Събитието dragenter се използва, когато плъзнат елемент е въведен в зона за пускане.
  • dragleave: Събитието dragleave се използва, когато оставим преместен елемент.
  • dragover: Събитието на драговър, което използваме при преместване на преместен елемент.
  • drop: Събитието за пускане се използва, когато хвърлихме плъзгания елемент.
  • dataTransfer Object: Обектът dataTransfer е най-полезният обект в API за плъзгане и пускане. Този обект дава разрешение да започнете да плъзгате елемент и да получите достъп до него, когато пуснем в падащото поле

Свойства на обекта за прехвърляне на данни

  • dropEffect: Този dropEffect се използва за показване на текущата операция с плъзгане и пускане.
  • effectAllowed: Това също показва операцията за плъзгане и пускане.
  • setData: Това се използва за добавяне на стойности към обекти за прехвърляне на данни.
  • getData: Използва се за извличане на съхранени стойности.

Пример за Vue.js Drag and Drop

Нека видим примери за това как работи плъзгане и пускане за по-добро разбиране. Първо, създаваме нов проект с име dnd, в който създадохме два различни компонента, както следва.

Име на първия компонент като Table.vue кода на компонента Table, както следва.

Код:


":id=id
""клас=таблица
"@dragover.prevent
"@drop.prevent=drop
">

Помогнете на развитието на сайта, споделяйки статията с приятели!

Категория:

Програмни езици