Das Implementieren von Drag-and-Drop-Listen in VUE kann über die HTML5-Drag-and-Drop-API oder die Bibliotheken von Drittanbietern erfolgen. 1. Bei Verwendung der nativen API fügen Sie draggable Attribute hinzu und dragstart, schleppen Sie, fallen Sie Ereignissen zu den Listenelementen, zeichnen Sie Indizes in DragStart, blockieren Sie das Standardverhalten in Dragover und tauschen Sie die Positionen in Drop aus. 2. Kombinieren Sie Vue -Responsive -Daten mit der Splei?methode, um die Array -Reihenfolge zu aktualisieren, um die Aktualisierung der Ansicht auszul?sen. 3. Verwenden Sie optional vugagable und andere Bibliotheken, um die Entwicklung zu vereinfachen und die Sortierung von Ven-Modellbindungen durch Drag & Drop-Sortieren zu implementieren, die Effizienz zu verbessern und komplexe Funktionen zu unterstützen.

Es ist eigentlich nicht schwierig, eine Drag-and-Drop-Liste in Vue zu implementieren. Der Schlüssel besteht darin, den Ausl?sermechanismus von Drag-and-Drop-Ereignissen zu verstehen und die reaktionsschnellen Funktionen von Vues zum Aktualisieren von Daten zu kombinieren. Im Folgenden werde ich es in mehrere Schritte unterteilt, um Sie Schritt für Schritt eine grundlegende, aber praktische listbare Liste zu implementieren.

Verwenden Sie HTML5 Native Drag & Drop -API, um grundlegende Drag & Drop -Funktionen zu implementieren

HTML5 bietet eine native Drag & Drop -API, die ideal zum Aufbau einfacher Drag & Drop -Interaktionen ist. Wir k?nnen das Draging -Verhalten über draggable Attribut und eine Reihe von Ereignissen (wie dragstart , dragover , drop usw.) steuern.

Schlüsselpunkte:

• Fügen Sie jedem Listenelement draggable="true" hinzu.
• Notieren Sie den Index des aktuell gezogenen Elements im dragstart -Ereignis.
• Blockieren Sie das Standardverhalten in dragover um die Platzierung zu erm?glichen.
• Tauschen oder Einfügen von Elementpositionen im drop -Ereignis.

Die Beispielcodestruktur ist wie folgt:

 <Semplate>
  <div>
    <div
      v-for = "(Element, Index) in Elementen"
      : Key = "item.id"
      draggable = "true"
      @Dragstart = "Ondragstart (Index)"
      @Dragover.Prevent
      @Drop = "Ondrop (Index)"
    >
      {{item.text}}
    </div>
  </div>
</template>

In Kombination mit der Reaktionsdaten -Aktualisierungsansicht von Vues

Der wichtigste Schritt im Drag & Drop -Prozess besteht darin, die Daten zu aktualisieren und die Ansicht automatisch zu aktualisieren. Sie k?nnen splice() -Methode des Arrays verwenden, um die Position des Elements zu verschieben.

Beispielmethode:

 Data () {
  zurückkehren {
    Artikel: [
      {ID: 1, Text: 'Artikel 1'},
      {ID: 2, Text: 'Artikel 2'},
      {ID: 3, Text: 'Artikel 3'}
    ],
    DraggedIndex: NULL
  };
},
Methoden: {
  Ondragstart (Index) {
    this.daggedIndex = index;
  },
  Ondrop (DropIndex) {
    const bewegtem = this.items.SPLICE (this.daggedIndex, 1) [0];
    this.Items.splice (DropIndex, 0, bewegtesItem);
    this.daggedIndex = null;
  }
}

Dies erm?glicht die automatische Aktualisierung der Array-Reihenfolge nach dem Ziehen und Abfallen, und Vue wird die Liste automatisch neu erstellen.

Optional: Verwenden Sie Bibliotheken von Drittanbietern, um den Entwicklungsprozess zu vereinfachen

Wenn Sie komplexere Drag & Drop-Funktionen ben?tigen, wie z. B. Cross-List-Drag & Drop, Animationseffekte usw., k?nnen Sie in Betracht ziehen, einige ausgereifte Vue-Drag & Drop-Komponentenbibliotheken zu verwenden, wie z. B.:

• SortableJS vue.DRAGGABLE
• Vue Draggable als n?chstes

Diese Bibliotheken verkapeln den gr??ten Teil der zugrunde liegenden Logik und sind sehr bequem zu verwenden. Verwenden Sie beispielsweise vuedraggable :

 NPM installieren Sie vugagable

Stellen Sie es dann vor und verwenden Sie es in der Komponente:

 <Semplate>
  <draggable v-model = "items">
    <div v-for = "item in items": key = "item.id">
      {{item.text}}
    </div>
  </draggable>
</template>

<Script>
draggierbar von &#39;vuedraggable&#39;;

Standard ausführen {
  Komponenten: {Draggable},
  Data () {
    zurückkehren {
      Artikel: [
        {ID: 1, Text: &#39;Artikel 1&#39;},
        {ID: 2, Text: &#39;Artikel 2&#39;},
        {ID: 3, Text: &#39;Artikel 3&#39;}
      ]
    };
  }
};
</script>

Grunds?tzlich ist das.
Von nativen APIs bis hin zu reifen Komponentenbibliotheken k?nnen Sie basierend auf der Projektkomplexit?t den richtigen Weg ausw?hlen. Obwohl die native Implementierung ein wenig umst?ndlich ist, hilft es, das Drag & Drop -Prinzip zu verstehen. Die Verwendung der Bibliothek kann Zeit sparen und die Effizienz verbessern.

Das obige ist der detaillierte Inhalt vonWie baue ich eine draggierbare Liste in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!