Pomóż w opracowaniu witryny, udostępniając artykuł znajomym!

Wprowadzenie do przeciągania i upuszczania js

Node.js udostępnia użytkownikowi funkcję Vue.js z różnymi opcjami, takimi jak funkcja przeciągania i upuszczania, w której przesyłamy dane z jednej lokalizacji do innej, co oznacza przeciąganie i upuszczanie. Zapewnia użytkownikowi interaktywny sposób manipulowania danymi. Gdy dodamy do Twojego projektu funkcję przeciągania i upuszczania, jest to świetny sposób, aby aplikacja była naturalna i przyjazna dla użytkownika. Zapewnia użytkownikom różne typy API do implementacji funkcji przeciągania i upuszczania, takich jak przeciąganie, przeciąganie, przeciąganie, przeciąganie, przeciąganie, przeciąganie i upuszczanie itp.Aby zaimplementować przeciąganie i upuszczanie, potrzebowaliśmy obiektu dataTransfer.

Składnia

1. Przeciągnij

startDrag: (zdarzenie , produkt)
{
event.dataTransfer.dropEffect=‘przenieś’
event.dataTransfer.effectAllowed=‘przenieś’
event.dataTransfer.setData('productID', product.id)
}

Wyjaśnienie

W powyższej składni przeciągania musimy przechowywać identyfikator produktu i przeciągamy za pomocą funkcji dataTransfer, a także wspominamy, że zdarzenie przeciągania zostanie przeniesione.

2. Upuść

onDrop (zdarzenie, produkt)
{
Const product_ID=event.dataTransfer.getData(‘productID’)
Const product=this.product.find(product=product.id==productID)
product.list=lista
}

Wyjaśnienie

W powyższej składni pobieramy przechowywany identyfikator produktu, dzięki czemu możemy uzyskać do niego prawidłowy dostęp.

Jak działa przeciąganie i upuszczanie w Vue.js?

  1. Musimy zainstalować Node.js 10.x i nowsze w twoim systemie i możesz to zweryfikować za pomocą polecenia node -v w terminalu.
  2. Musimy zainstalować najnowszą wersję Vue w twoim systemie za pomocą polecenia npm i -g @vue/cli.
  3. Następnie utwórz projekt, używając vue do utworzenia nazwy projektu.
  4. Musimy zainstalować przeciągane pakiety w Twoim projekcie za pomocą npm i -S vuedraggable.
  5. Wymagaliśmy podstawowej wiedzy o Node.js.
  6. Wymagaliśmy podstawowej wiedzy o Vue.js i jego komponentach.
  7. Za pomocą przeciągania i upuszczania Vue.js wykonujemy różne operacje.

Zanim zaczniemy wyjaśniać, musimy znać wydarzenie „przeciągnij i upuść” w następujący sposób.

Vue.js udostępnia łącznie osiem typów zdarzeń przeciągania i upuszczania w interfejsie API, które możemy zaimplementować w naszej aplikacji.

  • Przeciągnij: Zdarzenie przeciągania służy do przeciągania elementu.
  • dragstart: Zdarzenie dragstart jest używane do rozpoczęcia przeciągania elementu, który można przeciągać.
  • dragend: Zdarzenie przeciągania służy do pokazywania końców przeciągania.
  • dragenter: Zdarzenie dragenter jest używane, gdy przeciągnięty element zostanie wprowadzony do strefy upuszczania.
  • dragleave: Zdarzenie dragleave jest używane, gdy zostawiamy przeciągnięty element.
  • dragover: Zdarzenie dragover, którego używamy, gdy przeciągany element jest przesuwany.
  • drop: Zdarzenie drop jest używane, gdy upuszczamy przeciągnięty element.
  • DataTransfer Object: Obiekt dataTransfer jest najbardziej użytecznym obiektem w API przeciągnij i upuść. Ten obiekt daje uprawnienia do rozpoczęcia przeciągania elementu i uzyskiwania do niego dostępu po upuszczeniu w upuszczeniu

Właściwości obiektu transferu danych

  • dropEffect: Ten efekt dropEffect służy do pokazywania trwającej operacji przeciągania i upuszczania.
  • effectAllowed: Pokazuje również operację przeciągania i upuszczania.
  • setData: Służy do dodawania wartości do obiektów DataTransfer.
  • getData: Służy do pobierania zapisanych wartości.

Przykład przeciągania i upuszczania Vue.js

Zobaczmy przykłady działania przeciągania i upuszczania, aby lepiej zrozumieć. Najpierw tworzymy nowy projekt o nazwie dnd, w którym utworzyliśmy dwa różne komponenty w następujący sposób.

Nazwa pierwszego komponentu to Table.vue kod komponentu Table w następujący sposób.

Kod:


":id=id
""klasa=tabela
"@dragover.prevent
"@drop.prevent=drop
">

Pomóż w opracowaniu witryny, udostępniając artykuł znajomym!

Kategoria:

Języki programowania