So verwenden Sie die HTML 5 Drag & Drop-API in Vue

Die Drag & Drop-API fügt ziehbare Elemente zu HTML hinzu und ermöglicht uns die Erstellung von Webanwendungen mit umfangreichen UI-Elementen, die gezogen werden können.

In diesem Artikel erstellen wir eine einfache Kanban-Anwendung mit Vue.js. Kanban ist ein Projektmanagement-Tool, mit dem Benutzer Projekte von Anfang bis Ende visuell verwalten können. Tools wie Trello, Pivotal Tracker und Jira sind Beispiele für Kanban-Apps.

Einrichten des Boards

Führen Sie den folgenden Befehl aus, um unser Kanban-Projekt zu erstellen:

Vue erstellt Kanban-Board

Wenn Sie ein Projekt erstellen, umfasst die Auswahl nur die Standardvoreinstellungen für Babel und ESlint.

Wenn Sie fertig sind, löschen Sie die Standardkomponente „HelloWorld“ und ändern Sie die Komponente „App“, sodass sie leer ist und nur die reine Komponentenvorlage enthält:

<Vorlage> <div></div> </Vorlage>
<Skript>
Standard exportieren {
 Name: "App",
 Komponenten: {},
};
</Skript>
<Stil></Stil>

Als nächstes verwenden wir Bootstrap für das Styling. Alles was wir brauchen ist das Bootstrap CSS CDN. Fügen Sie dies dem Kopf von public/index.html hinzu.

<Kopf>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-kompatibel" content="IE=edge">
 <meta name="viewport" content="width=Gerätebreite,Anfangsmaßstab=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="externes Nofollow" >
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="externes Nofollow" 
 Integrität = "sha384-JcKb8q3iqJ61gNV9KGB8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" Crossorigin = "anonym">
 <Titel><%= htmlWebpackPlugin.options.title %></Titel>
 </Kopf>

Erstellen von UI-Komponenten in Kanban

Das Board sollte so aussehen:

Normalerweise besteht ein Brett aus Spalten und Karten. Karten sind einzelne Elemente oder Aufgaben, die ausgeführt werden müssen, und Spalten werden verwendet, um den Status einer bestimmten Karte anzuzeigen.

Sie müssen also drei Vue-Komponenten erstellen: eine für die Spalten, eine für die Karten und die letzte zum Erstellen neuer Karten.

Erstellen der Kartenkomponente

Lassen Sie uns zuerst die Kartenkomponente erstellen. Erstellen Sie eine neue Datei Card.vue im Verzeichnis /component.

Fügen Sie der Komponente den folgenden Code hinzu:

<Vorlage>
 <div Klasse="Karte">
 <div class="card-body">Eine Beispielkarte</div>
 </div>
</Vorlage>
<Skript>
Standard exportieren {};
</Skript>
<Stilbereich>
div.Karte {
 Rand unten: 15px;
 Kastenschatten: 0 0 5px #cccccc;
 Übergang: alles mühelos 300 ms;
 Hintergrund: #fdfdfd;
}
div.Karte:hover {
 Kastenschatten: 0 0 10px #aaaaaa;
 Hintergrund: #ffffff;
}
</Stil>

Dadurch wird die Kartenkomponente erstellt und formatiert. Wir haben der Komponente jedoch noch keine verschiebbare Funktionalität hinzugefügt, da dies lediglich das Grundgerüst der Komponente ist.

Erstellen der AddCard-Komponente

Wie der Name schon sagt, ist diese Komponente für das Erstellen neuer Karten und deren Hinzufügen zur Spalte verantwortlich.

Erstellen Sie eine AddCard.vue-Datei im Verzeichnis /components und fügen Sie den folgenden Code hinzu:

<Vorlage>
 <div Klasse="">
 <Schaltfläche
  Klasse = "btn btn-sm btn-info w-100"
  v-if="!imAddMode"
  @click="inAddMode = true"
 >
  Karte hinzufügen
 </button>
 <form action="#" class="card p-3" ref="form" v-else>
  <div Klasse="Formulargruppe">
  <Eingabe
   Typ="Text"
   name="Titel"
   id="Titel"
   Klasse="Formular-Steuerelement"
   Platzhalter="Etwas Interessantes ..."
   v-model="Kartendaten"
  />
  </div>
  <div Klasse = "d-flex rechtfertigen-Inhalt-Mitte">
  <button type="submit" class="btn w-50 btn-primary mr-3">Speichern</button>
  <button Typ="Zurücksetzen" Klasse="btn w-50 btn-danger">
   Stornieren
  </button>
  </div>
 </form>
 </div>
</Vorlage>
<Skript>
Standard exportieren {
 Daten() {
 zurückkehren {
  inAddMode: false,
  Kartendaten: '',
 };
 },
 Methoden: {},
};
</Skript>
<Stil></Stil>

Die spezifischen Funktionen werden später erstellt.

Erstellen einer Spaltenkomponente

Diese letzte Komponente dient zur Anzeige der Kartenliste und enthält auch die Komponente „AddCard“, sodass neue Karten direkt in der Spalte erstellt werden können.

Erstellen Sie eine Column.vue-Datei im Komponentenverzeichnis und fügen Sie den folgenden Code hinzu:

<Vorlage>
 <div class="col-md-3 Kartenspalte" ref="Spalte">
 <header class="Kartenheader">
  <h3 class="col">Spaltenname</h3>
 </header>
 <div Klasse = "Kartenliste"></div>
 </div>
</Vorlage>
<Skript>
Standard exportieren {};
</Skript>
<Stilbereich>
div.Spalte {
 Polsterung: 0;
 Polsterung unten: 15px;
 Rand: 0 15 px;
 Kastenschatten: 0 0 10px #cccccc;
}
div.Kartenliste {
 Polsterung: 0 15px;
}
Kopfzeile {
 Rand unten: 10px;
}
Überschrift h3 {
 Textausrichtung: zentriert;
}
</Stil>

Nachdem nun der Rahmen des Projekts festgelegt ist, werfen wir einen Blick auf die Funktionsweise von Drag & Drop im Browser.

Was ist die HTML5 Drag & Drop API?

Der Ziehvorgang beginnt, wenn der Benutzer die Maus über das ziehbare Element bewegt und das Element anschließend über das für Drag & Drop aktivierte Element bewegt.

Standardmäßig sind die einzigen verschiebbaren HTML-Elemente Bilder und Links. Um andere Elemente ziehbar zu machen, müssen Sie dem Element das Draggable-Attribut hinzufügen. Sie können die Funktionalität auch explizit in JavaScript erstellen, indem Sie das Element auswählen und das Draggable-Attribut auf „True“ setzen.

Nachdem Sie das Draggable-Attribut eines Elements auf „True“ gesetzt haben, werden Sie feststellen, dass das Draggable-Attribut dem Element hinzugefügt wird.

<!-- Ein Element in HTML verschiebbar machen -->
<div draggable="true">Dies ist ein verschiebbares Div in HTML</div>

<Skript>
// Ein Element in Javascript verschiebbar machen
const div = document.querySelector('div');
div.draggable = wahr;
</Skript>

Der Zweck eines Drag-Elements besteht darin, Daten von einem Teil der Seite in einen anderen zu übertragen.

Bei Bildern sind die zu übertragenden Daten die Bild-URL oder ihre Base64-Darstellung. Handelt es sich um einen Link, sind die übertragenen Daten die URL. Sie können den Link in die URL-Leiste Ihres Browsers verschieben, wodurch der Browser zu dieser URL springt.

Ohne die Möglichkeit zur Datenübertragung ist das Ziehen von Elementen also nutzlos. Per Drag-and-Drop übertragene Daten können über die DataTransfer-API im Drag-Datenspeicher gespeichert werden. Dies bietet eine Möglichkeit, Daten während eines Drag-and-Drop-Vorgangs zu speichern und darauf zuzugreifen.

DataTransfer bietet einen Ort zum Hinzufügen von Elementen, die per Drag & Drop übertragen werden sollen. Daten können dem Drag-Datenspeicher hinzugefügt werden, wenn ein Drag-Vorgang beginnt (wenn das Dragstart-Ereignis aufgerufen wird), und Daten können erst empfangen werden, nachdem der Drag-and-Drop-Vorgang abgeschlossen ist (wenn das Drop-Ereignis aufgerufen wird).

Während des Zeitraums vom Ziehen bis zum Loslassen des Elements, nachdem das Element gezogen und abgelegt wurde, werden am gezogenen Element zwei Ereignisse ausgelöst: „dragstart“ und „dragend“.

Das Ziehen und Ablegen verschiebbarer Elemente ist derzeit nicht möglich. Ein Element muss nicht nur explizit ziehbar gemacht werden, sondern auch für das Ablegen aktiviert werden.

Um Drag & Drop eines Elements zu aktivieren, müssen Sie auf das Dragover-Ereignis warten und die Standardbrowseraktion verhindern.

<!-- Einen Abschnitt drop-fähig machen -->
<Abschnitt Klasse="Abschnitt"></Abschnitt>
<Skript>
const Abschnitt = document.querySelector('.Abschnitt');
Abschnitt.addEventListener('dragover', (e) => {
 e.preventDefault();
});
</Skript>

Wenn ein Element auf ein Drag-and-Drop-fähiges Element gezogen wird, werden die folgenden Ereignisse für das Drag-and-Drop-fähige Element ausgelöst:

Dragenter: Wird einmal ausgelöst, wenn ein Element über ein Element gezogen wird, das Drag & Drop ermöglicht
Dragover: Wird kontinuierlich ausgelöst, solange sich das Element über einem Drop-fähigen Element befindet.
Drop: Wird ausgelöst, nachdem das gezogene Element auf einem Element abgelegt wurde, für das Drag & Drop aktiviert ist.

Es ist wichtig zu beachten, dass auf die im DataTransfer-Objekt gespeicherten Daten nur zugegriffen werden kann, wenn ein Drop-Ereignis ausgelöst wird, nicht bei einem Dragenter oder Dragover.

Zusammenbau aller Komponenten

Bevor wir unseren Komponenten Drag & Drop-Funktionen hinzufügen, sprechen wir über den App-Status.

Hier wird der App-Status in der App-Komponente gespeichert, der dann als Props an die Column-Komponente weitergegeben werden kann. Andererseits übergibt die Spaltenkomponente beim Rendern die erforderlichen Eigenschaften an die Kartenkomponente.

Ändern Sie App.vue, um den Status und die Komponentenzusammensetzung widerzuspiegeln:

// App.vue
<Vorlage>
 <div Klasse="Containerflüssigkeit">
 <h2 Klasse="m-5">
  Vue Kanban-Tafel
 </h2>
 <div Klasse = "Zeile ausrichten-Inhalt-Mitte">
  <Spalte
  v-for="(Spalte, Index) in Spalten"
  :column="Spalte"
  :Schlüssel="Index"
  />
 </div>
 </div>
</Vorlage>
<Skript>
Spalte aus „./components/Column“ importieren;
Standard exportieren {
 Name: "App",
 Komponenten:
 Spalte,
 },
 Daten() {
 zurückkehren {
  Spalten: [
  {
   Name: 'Aufgaben',
   Karten:
   {
    Wert: 'Frühstück zubereiten',
   },
   {
    Wert: 'Zum Markt gehen',
   },
   {
    Wert: 'Wäsche waschen',
   },
   ],
  },
  {
   Name: 'In Bearbeitung',
   Karten: [],
  },
  {
   Name: "Fertig",
   Karten: [],
  },
  ],
 };
 },
};
</Skript>
<Stil>
h2 {
 Textausrichtung: zentriert;
}
</Stil>

Hier haben wir die Spaltenkomponente importiert und die Daten jeder Spalte an die Spaltenkomponente übergeben, während wir die Daten im Spaltenstatus durchlaufen haben. In diesem Fall gibt es nur drei Spalten: „Zu erledigen“, „In Arbeit“ und „Erledigt“, und jede Spalte verfügt über eine Reihe von Karten.

Aktualisieren Sie als Nächstes die Column-Komponente, um die Requisiten zu empfangen und anzuzeigen:

// Spalte.vue
<Vorlage>
 <div class="col-md-3 Kartenspalte" ref="Spalte">
 <header class="Kartenheader">
  <h3 class="col">{{ Spaltenname }}</h3>
  <Karte hinzufügen />
 </header>
 <div Klasse="Kartenliste">
  <Card v-for="(Karte, Index) in Spalte.Karten" :Schlüssel="Index" :Karte="Karte" />
 </div>
 </div>
</Vorlage>
<Skript>
Karte aus „./Card“ importieren;
importiere AddCard aus „./AddCard“;
Standard exportieren {
 Name: 'Spalte',
 Komponenten:
 Karte,
 AddCard,
 },
 Requisiten: {
 Spalte: {
  Typ: Objekt,
  erforderlich: wahr,
 },
 },
};
</Skript>

...

Die Spaltenkomponente empfängt Eigenschaften von der App-Komponente und verwendet diese zum Rendern der Kartenkomponentenliste. Auch hier kommt die Komponente AddCard zum Einsatz, da es möglich sein soll, neue Karten direkt in die Spalte einzufügen.

Schließlich wird die Kartenkomponente aktualisiert, um die von der Spalte empfangenen Daten anzuzeigen.

// Karte.vue
<Vorlage>
 <div class="Karte" ref="Karte">
 <div Klasse="Kartenkörper">{{ Kartenwert }}</div>
 </div>
</Vorlage>
<Skript>
Standard exportieren {
 Name: 'Karte',
 Requisiten: {
 Karte: {
  Typ: Objekt,
  erforderlich: wahr,
 },
 },
};
</Skript>

Die Kartenkomponente empfängt einfach alle benötigten Daten aus der Spalte und zeigt sie an. Wir fügen hier auch einen Verweis auf das Kartenelement hinzu, was beim Zugriff auf das Kartenelement mit JavaScript nützlich ist.

Nach Abschluss der oben genannten Schritte sollte Ihre Bewerbung folgendermaßen aussehen:

Hinzufügen einer Drag & Drop-Funktionalität

Der erste Schritt beim Hinzufügen der Drag-and-Drop-Funktionalität besteht darin, die ziehbaren Komponenten und Ablageziele zu identifizieren.

Der Benutzer sollte in der Lage sein, Karten von einer Spalte in eine andere zu ziehen und dabei den Aktivitätsverlauf auf der Karte zu verfolgen. Daher sollte die verschiebbare Komponente eine Kartenkomponente und das Ablageziel eine Spaltenkomponente sein.

Machen Sie die Karte verschiebbar

Um eine Kartenkomponente ziehbar zu machen, müssen Sie Folgendes tun:

1. Setzen Sie die Draggable-Eigenschaft auf „true“
2. Verwenden Sie das DataTransfer-Objekt, um die zu übertragenden Daten festzulegen

Sie sollten draggable zuerst auf true setzen. Laut Vue-Lebenszyklus-Hook sollte der installierte Hook der sichere Ort sein. Fügen Sie dem montierten Hook der Kartenkomponente Folgendes hinzu:

// Karte.vue
<Skript>
Standard exportieren {
 Name: 'Karte',
 Requisiten: {...},

 montiert() {
 dies.setDraggable();
 },

 Methoden: {
 setZiehbare() {
  // Kartenelement abrufen.
  const Karte = diese.$refs.Karte;
  Karte.ziehbar = wahr;
  // Ereignis-Listener einrichten.
  Karte.addEventListener('dragstart', this.handleDragStart);
  Karte.addEventListener('dragend', this.handleDragEnd);
 },
 },
</Skript>

Oben haben wir eine Methode „setDraggable“ erstellt, um die Kartenkomponente verschiebbar zu machen.

Holen Sie sich in setDraggable die Karte aus der Referenz, die Sie im vorherigen Abschnitt hinzugefügt haben, und setzen Sie die Draggable-Eigenschaft auf true.

Sie müssen außerdem Ereignis-Listener einrichten:

// Karte.vue
<Skript>
exportiere const CardDataType = "text/x-kanban-card";

Standard exportieren {
...
 Methoden: {
 setDraggable() {...},
 handleDragStart(Ereignis) {
  const dataTransfer = Ereignis.dataTransfer;
  //Setzen Sie die Daten auf den Wert der Karte, der von den Requisiten abgerufen wird.
  dataTransfer.setData(Kartendatentyp, dieser.Kartenwert);
  dataTransfer.effectAllowed = "Verschieben";
  // Fügen Sie visuelle Hinweise hinzu, um anzuzeigen, dass sich die Karte nicht mehr an ihrer Position befindet.
  Ereignis.Ziel.Stil.Deckkraft = 0,2;
 },
 handleDragEnd(Ereignis) {
  // Setzt die Deckkraft auf den Normalwert zurück, wenn die Karte fallengelassen wird.
  Ereignis.Ziel.Stil.Deckkraft = 1;
 }
 }
}
</Skript>

Wie bereits erwähnt, können Daten nur dann zum Drag-Datenspeicher hinzugefügt werden, wenn das Dragstart-Ereignis aufgerufen wird. Sie müssen also Daten in der Methode handleDragStart hinzufügen.

Die wichtige Information, die beim Festlegen der Daten verwendet werden muss, ist das Format, das eine Zeichenfolge sein kann. In unserem Fall ist es auf Text/X-Kanban-Karte eingestellt. Speichern Sie dieses Datenformat und exportieren Sie es, da die Spaltenkomponente es beim Abrufen der Daten nach dem Löschen der Karte verwendet.

Reduzieren Sie abschließend die Transparenz der Karte auf 0,2, um dem Benutzer eine Rückmeldung zu geben, dass die Karte tatsächlich aus ihrer ursprünglichen Position gezogen wurde. Stellen Sie die Transparenz nach Abschluss des Ziehens wieder auf 1 ein.

Die Karten können nun gezogen werden. Fügen Sie als Nächstes das Ablageziel hinzu.

Dragover auf Drop-fähig setzen

Wenn Sie eine Karte auf eine Spaltenkomponente ziehen, wird sofort ein Dragover-Ereignis ausgelöst und ein Drop-Ereignis, sobald die Karte in die Spalte abgelegt wird.

Damit die Karten in die Spalten fallen, müssen Sie auf diese Ereignisse achten.

// Spalte.vue
<Vorlage>...</Vorlage>
<Skript>
importiere Karte { CardDataType } aus './Card';
importiere AddCard aus „./AddCard“;
Standard exportieren {
 Name: 'Spalte',
 Komponenten: {...},
 Requisiten: {...},
 montiert() {
 dies.enableDrop();
 },
 Methoden: {
 enableDrop() {
  const Spalte = diese.$refs.Spalte;
  column.addEventListener('dragenter', this.handleDragEnter);
  Spalte.addEventListener('dragover', this.handleDragOver);
  Spalte.addEventListener('drop', this.handleDrop);
 },
 /**
  * @param {DragEvent} Ereignis
  */
 handleDragEnter(Ereignis) {
  wenn (event.dataTransfer.types.includes[CardDataType]) {
  // Nur Karten verarbeiten.
  event.preventDefault();
  }
 },
 handleDragOver(Ereignis) {
  // Einen Bewegungseffekt erstellen.
  event.dataTransfer.dropEffect = "verschieben";
  event.preventDefault();
 },
 /**
  * @param {DragEvent} Ereignis
  */
 handleDrop(Ereignis) {
  const data = event.dataTransfer.getData(CardDataType);
  // Ein Kartenverschiebungsereignis ausgeben.
  dies.$emit('cardMoved', Daten);
 },
 },
};
</Skript>

Hier richten Sie alle erforderlichen Ereignis-Listener ein, um das Löschen nach der Bereitstellung der Column-Komponente zu ermöglichen.

Von den drei Ereignissen wird zuerst „Dragenter“ ausgelöst. Es wird sofort ausgelöst, wenn das ziehbare Element in die Spalte gezogen wird. Für unser Programm möchten wir die Karte nur in eine Spalte einfügen, daher verhindern wir im Dragenter-Ereignis nur den Standardwert des Datentyps, der den in der Kartenkomponente definierten Kartendatentyp enthält.

Stellen Sie im Dragover-Ereignis den Drop-Effekt auf Bewegung ein.

Holen Sie sich die im Drop-Ereignis vom dataTransfer-Objekt übertragenen Daten.

Als Nächstes müssen Sie den Status aktualisieren und die Karte in die aktuelle Spalte verschieben. Da sich unser Programmstatus in der App-Komponente befindet, senden wir das Ereignis „cardMoved“ im Drop-Listener aus, übergeben die übertragenen Daten und warten auf das Ereignis „cardMoved“ in der App-Komponente.

Aktualisieren Sie App.vue, um auf das Ereignis „cardMoved“ zu warten:

// App.vue

<Vorlage>
 <div Klasse="Containerflüssigkeit">
 ...
 <div Klasse = "Zeile ausrichten-Inhalt-Mitte">
  <Spalte
  v-for="(Spalte, Index) in Spalten"
  :column="Spalte"
  :Schlüssel="Index"
  @cardMoved="VerschiebeKarteZuSpalte($event, Spalte)"
  />
 </div>
 </div>
</Vorlage>

<Skript>
Spalte aus „./components/Column“ importieren;
Standard exportieren {
 Name: "App",
 Komponenten: {...},
 Daten() {
 zurückkehren {...}
 },
 Methoden: {
 moveCardToColumn(Daten, neueSpalte) {
  const formerColumn = this.columns.find(column => {
  // Alle Kartenwerte in einer Spalte abrufen.
  const cardValues ​​​​= Spalte.Karten.map((Karte) => Karte.Wert);
  gibt cardValues.includes(Daten) zurück;
  })
  // Karte aus vorheriger Spalte entfernen.
  ehemaligeColumn.cards = ehemaligeColumn.cards.filter(
  (Karte) => Karte.Wert !== Daten
  );
  //Karte zur neuen Spalte hinzufügen.
  newColumn.cards.push({ Wert: Daten });
 },
 },
}
</Skript>

Hier wird das Ereignis cardMoved über @cardMoved abgehört und die Methode moveCardToColumn aufgerufen. Das Ereignis „cardMoved“ gibt einen Wert (die Kartendaten) aus, auf den über „$event“ zugegriffen werden kann. Außerdem wird ihm die aktuelle Spalte übergeben, in der die Karte abgelegt wurde (dort wurde das Ereignis ausgelöst).

Die Funktion moveCardToColumn führt drei Dinge aus: Sie findet die Spalte, in der sich die Karte zuvor befand, entfernt die Karte aus dieser Spalte und fügt die Karte schließlich der neuen Spalte hinzu.

Vervollständige das Board

Nachdem wir die Drag & Drop-Funktionalität implementiert haben, fehlt nur noch die Möglichkeit, Karten hinzuzufügen.

Fügen Sie AddCard.vue den folgenden Code hinzu:

<Vorlage>
 <div Klasse="">
 <Schaltfläche
  Klasse = "btn btn-sm btn-info w-100"
  v-if="!imAddMode"
  @click="inAddMode = true"
 >
  Karte hinzufügen
 </button>
 <Formular
  Aktion=""
  Klasse="Karte p-3"
  @submit.prevent="Senden"
  @reset="Zurücksetzen des Griffs"
  ref="Formular"
  v-sonst
 >
  ...
 </form>
 </div>
</Vorlage>
<Skript>
Standard exportieren {
 Daten() {
 zurückkehren {...};
 },
 Methoden: {
 handleSubmit() {
  wenn (diese.cardData.trim()) {
  diese.cardData = '';
  dies.inAddMode = falsch;
  dies.$emit('neueKarte', dies.cardData.trim());
  }
 },
 griffZurücksetzen() {
  diese.cardData = '';
  dies.inAddMode = falsch;
 },
 },
};
</Skript>

Der obige Code ist die Funktion, die ausgeführt wird, wenn das Formular „Karte hinzufügen“ übermittelt oder zurückgesetzt wird.

Löschen Sie die Kartendaten nach dem Zurücksetzen und setzen Sie inAddMode auf „false“.

Sie löschen außerdem die Kartendaten nach dem Absenden des Formulars, sodass beim Hinzufügen eines neuen Elements die vorherigen Daten nicht angezeigt werden. Außerdem setzen Sie inAddMode auf „false“ und geben das Ereignis „newcard“ aus.

Die AddCard-Komponente wird in der Column-Komponente verwendet, daher müssen Sie auf das Newcard-Ereignis in der Column-Komponente hören. Fügen Sie Code hinzu, um auf das Newcard-Ereignis in der Column-Komponente zu hören:

<Vorlage>
 <div class="col-md-3 Kartenspalte" ref="Spalte">
 <header class="Kartenheader">
  <h3 class="col">{{ Spaltenname }}</h3>
  <Karte hinzufügen @newcard="$emit('newcard', $event)"></Karte hinzufügen>
 </header>
 ...
</Vorlage>
...

Durch erneutes Aussenden des Newcard-Ereignisses kann es die App-Komponente erreichen, wo die eigentliche Aktion stattfindet.

Benutzerdefinierte Vue-Ereignisse werden nicht weitergeleitet, sodass die App-Komponente nicht auf das von der AddCard-Komponente ausgegebene Newcard-Ereignis hören kann, da es sich nicht um eine direkte untergeordnete Komponente handelt.
Aktualisieren Sie den Code der App-Komponente, um das Newcard-Ereignis zu verarbeiten:

// App.vue

<Vorlage>
 <div Klasse="Containerflüssigkeit">
 ...
 <div Klasse = "Zeile ausrichten-Inhalt-Mitte">
  <Spalte
  v-for="(Spalte, Index) in Spalten"
  :column="Spalte"
  :Schlüssel="Index"
  @cardMoved="VerschiebeKarteZuSpalte($event, Spalte)"
  @newcard="handleNewCard($event, Spalte)"
  />
 </div>
 </div>
</Vorlage>

<Skript>
Spalte aus „./components/Column“ importieren;
Standard exportieren {
 Name: "App",
 Komponenten: {...},
 Daten() {
 zurückkehren {...}
 },
 Methoden: {
 moveCardToColumn(Daten, neueSpalte) {...},
 handleNewCard(Daten, Spalte) {
  // Neue Karte zur Spalte hinzufügen.
  Spalte.Karten.Unshift({Wert: Daten});
 },
 },
};
</Skript>

Hier warten wir auf das Newcard-Ereignis, das von der Column-Komponente aufgerufen wird. Nachdem wir die Daten erhalten haben, erstellen wir eine neue Karte und fügen sie der Spalte hinzu, in der wir sie erstellt haben.

Zusammenfassen

In diesem Artikel haben wir vorgestellt, was die Drag & Drop-API von HTML 5 ist, wie man sie verwendet und wie man sie in Vue.js implementiert.

Die Drag & Drop-Funktionalität kann auch in anderen Front-End-Frameworks und nativem JavaScript verwendet werden.

Oben finden Sie Einzelheiten zur Verwendung der HTML 5-Drag-and-Drop-API in Vue. Weitere Informationen zur Drag-and-Drop-API in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!