Helfen Sie der Entwicklung der Website und teilen Sie den Artikel mit Freunden!

Einführung in JS Drag & Drop

Node.js stellt dem Benutzer eine Vue.js-Funktion mit verschiedenen Optionen zur Verfügung, wie z. Es bietet dem Benutzer eine interaktive Möglichkeit, seine Daten zu manipulieren. Wenn wir Ihrem Projekt Drag-and-Drop-Funktionalität hinzufügen, ist dies eine großartige Möglichkeit, die Anwendung natürlich und benutzerfreundlich zu gest alten. Es bietet Benutzern verschiedene Arten von APIs zum Implementieren von Drag-and-Drop-Funktionen wie Drag, Dragstart, Dragend, Dragenter, Dragleave, Dragover und Drop usw.Um Drag & Drop zu implementieren, benötigten wir ein dataTransfer-Objekt.

Syntax

1. Ziehen

startDrag: (Ereignis, Produkt)
{
event.dataTransfer.dropEffect=‘move’
event.dataTransfer.effectAllowed=‘move’
event.dataTransfer.setData(‘productID’, product.id)
}

Erklärung

In der obigen Drag-Syntax müssen wir die ID des Produkts speichern und wir ziehen mit der dataTransfer-Funktion und wir erwähnen hier auch, dass das Drag-Ereignis verschoben wird.

2. Drop

onDrop (Veranst altung, Produkt)
{
Const product_ID=event.dataTransfer.getData(‘productID’)
Const product=this.product.find(product=product.id==productID)
produkt.liste=liste
}

Erklärung

In der obigen Syntax rufen wir die gespeicherte Produkt-ID ab, damit wir richtig darauf zugreifen können.

Wie funktioniert Drag & Drop in Vue.js?

  1. Wir müssen Node.js 10.x und höher auf Ihrem System installieren und Sie können dies mit dem Befehl node -v in Ihrem Terminal überprüfen.
  2. Wir müssen die neueste Version von Vue auf Ihrem System installieren, indem Sie den Befehl npm i -g @vue/cli verwenden.
  3. Erstellen Sie dann das Projekt, indem Sie mit vue einen Projektnamen erstellen.
  4. Wir müssen die ziehbaren Pakete in Ihrem Projekt mit npm i -S vuedraggable installieren.
  5. Wir haben Grundkenntnisse über Node.js benötigt.
  6. Wir haben grundlegende Kenntnisse über Vue.js und seine Komponenten benötigt.
  7. Mit Hilfe von Vue.js Drag and Drop führen wir verschiedene Operationen durch.

Bevor wir das erklären, müssen wir das Drag and Drop Event wie folgt kennen.

Vue.js bietet insgesamt acht Arten von Drag-and-Drop-Ereignissen in der API und wir können sie in unserer Anwendung implementieren.

  • Drag: Das Drag-Ereignis wird verwendet, um das Element zu ziehen.
  • dragstart: Das Ereignis dragstart wird verwendet, um das Ziehen eines ziehbaren Elements zu starten.
  • dragend: Das Ereignis dragend wird verwendet, um die Drag-Enden anzuzeigen.
  • dragenter: Das Ereignis dragenter wird verwendet, wenn ein gezogenes Element in eine Dropp-Zone eingetragen wird.
  • dragleave: Das Dragleave-Ereignis wird verwendet, wenn wir ein gezogenes Element verlassen.
  • dragover: Das Dragover-Ereignis, das wir verwenden, wenn ein gezogenes Element verschoben wird.
  • drop: Das Drop-Ereignis wird verwendet, wenn wir das gezogene Element fallen lassen.
  • dataTransfer-Objekt: Das dataTransfer-Objekt ist das nützlichste Objekt in der Drag-and-Drop-API. Dieses Objekt erteilt die Berechtigung, mit dem Ziehen eines Elements zu beginnen und darauf zuzugreifen, wenn wir es in den Drop fallen

Eigenschaften des dataTransfer-Objekts

  • dropEffect: Dieser dropEffect wird verwendet, um laufende Drag-and-Drop-Operationen anzuzeigen.
  • effectAllowed: Dies zeigt auch die Drag-and-Drop-Operation.
  • setData: Dies wird verwendet, um dataTransfer-Objekten Werte hinzuzufügen.
  • getData: Es wird verwendet, um gespeicherte Werte abzurufen.

Beispiel für Vue.js Drag and Drop

Schauen wir uns zum besseren Verständnis Beispiele an, wie Drag & Drop funktioniert. Zuerst erstellen wir ein neues Projekt mit einem Namen wie dnd, in dem wir zwei verschiedene Komponenten wie folgt erstellt haben.

Name der ersten Komponente als Table.vue den Code der Table-Komponente wie folgt.

Code:


":id=id
""Klasse=Tabelle
"@dragover.prevent
"@drop.prevent=fallen
">

Helfen Sie der Entwicklung der Website und teilen Sie den Artikel mit Freunden!

Kategorie:

Programmiersprachen