Wie baue ich eine draggierbare Liste in Vue?

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!