Wie implementiert man Listensortierung und Drag-Sortierung in Vue?

Mit der kontinuierlichen Weiterentwicklung der Front-End-Entwicklungstechnologie müssen immer mehr Websites und Anwendungen Drag-and-Drop-Sortierfunktionen auf der Benutzeroberfläche implementieren. Im Vue-Framework können wir einige Bibliotheken oder Komponenten verwenden, um Listensortierungs- und Drag-Sortierfunktionen einfach zu implementieren.

1. Verwenden Sie sortable.js, um die Listensortierung zu implementieren.

sortable.js ist eine unabhängige Bibliothek, die die Drag-and-Drop-Sortierfunktion von Listen unterstützen kann. In Vue.js verwenden wir sortable.js, um die Sortierfunktion der Liste zu implementieren.

Zuerst müssen wir sortable.js im Projekt installieren. Sie können es mit dem Befehl npm installieren:

npm install sortablejs --save

Dann führen Sie sortable.js in der Komponente ein:

import Sortable from 'sortablejs'

Dann in der montierten Hook-Funktion der Komponente. Verwenden Sie sortable.js, um die Liste zu initialisieren, wie unten gezeigt:

mounted() {
  let el = this.$refs.list
  this.sortable = Sortable.create(el, {
    onEnd: this.onEnd
  })
},
methods: {
  onEnd: function (evt) {
    // 拖动后的排序操作
  }
}

Unter anderem ist onEnd die Rückruffunktion, wenn ein Listenelement per Drag & Drop verschoben wird. Mit dieser Funktion können wir die Listensequenz neu anordnen oder die neu angeordnete Listensequenz speichern an die Datenbank oder den Server.

2. Verwenden Sie vue-draggable, um die Drag-Sortierung zu implementieren.

vue-draggable ist eine ziehbare Sortierlistenkomponente, die auf Vue.js basiert und die Drag-and-Drop-Sortierfunktion der Liste problemlos implementieren kann. Verwenden Sie vue-draggable, um interaktive Listen in Vue.js-Anwendungen zu implementieren, z. B. das Ziehen von Tabellenzeilen, das Ändern von Kachelgröße und -position usw.

Sie können den Befehl npm verwenden, um vue-draggable zu installieren:

npm install vuedraggable --save

Dann verwenden Sie die vue-draggable-Komponente in der Komponente, wie unten gezeigt:

<template>
  <draggable v-model="list" :element="'ul'">
    <li v-for="item in list" :key="item.id">
      {{ item.id }}. {{ item.text }}
    </li>
  </draggable>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    components: { draggable },
    data() {
      return {
        list: [
          { id: 1, text: 'Vue.js' },
          { id: 2, text: 'React.js' },
          { id: 3, text: 'Angular.js' },
          { id: 4, text: 'Ember.js' },
          { id: 5, text: 'Backbone.js' },
          { id: 6, text: 'Knockout.js' }
        ]
      }
    }
  }
</script>

Im obigen Code verwenden wir die vue-draggable-Komponente, um die zu kapseln Liste und Die V-Model-Direktive wird zum Binden der Listendaten der Komponente verwendet, sodass die Reihenfolge der Liste durch Ziehen geändert werden kann.

3. Verwenden Sie Vue Sortable, um Drag-and-Drop-Sortierung zu implementieren.

Vue Sortable ist eine Komponente von Vue.js, die es uns ermöglicht, hochgradig anpassbare Drag-and-Drop-Sortierfunktionen für Listen zu implementieren. Vue Sortable erfordert keine Konfiguration. Sie müssen lediglich die einfache Vue.js-Vorlagensyntax verwenden, um Drag-and-Drop-Sortierlisten zu implementieren.

Die Installation von Vue Sortable kann auch mit dem npm-Befehl erfolgen:

npm install vue-sortable --save

Dann verwenden Sie die Vue Sortable-Komponente in der Komponente wie unten gezeigt:

<template>
  <div>
    <ul v-sortable="{data: list, onUpdate: onUpdate}">
      <li v-for="item in list" :key="item.id">
        {{ item.id }}. {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
  import VueSortable from 'vue-sortable'

  export default {
    components: { VueSortable },
    data() {
      return {
        list: [
          { id: 1, text: 'Vue.js' },
          { id: 2, text: 'React.js' },
          { id: 3, text: 'Angular.js' },
          { id: 4, text: 'Ember.js' },
          { id: 5, text: 'Backbone.js' },
          { id: 6, text: 'Knockout.js' }
        ]
      }
    },
    methods: {
      onUpdate: function (event) {
        // 拖动后的排序操作
      }
    }
  }
</script>

Im obigen Code haben wir die vue-sortable-Direktive verwendet, um die Liste festzulegen sortierbar sein und die Rückruffunktion onUpdate wird verwendet, um die Liste zu aktualisieren, nachdem die Drag-Sortierung abgeschlossen ist.

Durch die oben genannten drei Methoden können wir die Listensortierungs- und Drag-Sortierungsfunktionen in Vue einfach implementieren, wodurch unsere Anwendungen interaktiver und benutzerfreundlicher werden.

Das obige ist der detaillierte Inhalt vonWie implementiert man Listensortierung und Drag-Sortierung in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!