Comment implémenter le tri de liste et le tri par glisser-déposer dans Vue ?

Avec le développement continu de la technologie de développement front-end, de plus en plus de sites Web et d'applications doivent implémenter des fonctions de tri par glisser-déposer sur l'interface. Dans le framework Vue, nous pouvons utiliser certaines bibliothèques ou composants pour implémenter facilement des fonctions de tri de liste et de tri par glisser-déposer.

1. Utilisez sortable.js pour implémenter le tri de listes

sortable.js est une bibliothèque indépendante qui peut prendre en charge la fonction de tri par glisser-déposer des listes. Dans Vue.js, nous utilisons sortable.js pour implémenter la fonction de tri de la liste.

Tout d'abord, nous devons installer sortable.js dans le projet. Vous pouvez utiliser la commande npm pour l'installer :

npm install sortablejs --save

Ensuite introduire sortable.js dans le composant :

import Sortable from 'sortablejs'

Puis dans la fonction hook monté du composant, utilisez sortable.js pour initialiser la liste, comme indiqué ci-dessous :

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

Parmi eux, onEnd est la fonction de rappel lorsqu'un élément de liste est glissé et déposé. Dans cette fonction, nous pouvons réorganiser la séquence de liste ou stocker la séquence de liste réorganisée. à la base de données ou au serveur.

2. Utilisez vue-draggable pour implémenter le tri par glisser-déposer

vue-draggable est un composant de liste de tri déplaçable basé sur Vue.js, qui peut facilement implémenter la fonction de tri par glisser-déposer de la liste. Utilisez vue-draggable pour implémenter des listes interactives dans les applications Vue.js, telles que faire glisser des lignes de tableau, modifier la taille et la position des vignettes, etc.

Vous pouvez utiliser la commande npm pour installer vue-draggable :

npm install vuedraggable --save

Ensuite, utilisez le composant vue-draggable dans le composant, comme indiqué ci-dessous :

<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>

Dans le code ci-dessus, nous utilisons le composant vue-draggable pour encapsuler le list, et La directive v-model est utilisée pour lier les données de liste du composant, de sorte que l'ordre de la liste puisse être modifié en faisant glisser.

3. Utilisez Vue Sortable pour implémenter le tri par glisser-déposer

Vue Sortable est un composant de Vue.js, qui nous permet d'implémenter facilement des fonctions de tri par glisser-déposer de liste hautement personnalisables. Vue Sortable ne nécessite pas de configuration. Il vous suffit d'utiliser une syntaxe de modèle Vue.js simple pour implémenter des listes de tri par glisser-déposer.

L'installation de Vue Sortable peut également être effectuée à l'aide de la commande npm :

npm install vue-sortable --save

Utilisez ensuite le composant Vue Sortable dans le composant comme indiqué ci-dessous :

<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>

Dans le code ci-dessus, nous avons utilisé la directive vue-sortable pour définir la liste pour être triable, et la fonction de rappel onUpdate est utilisée pour mettre à jour la liste une fois le tri par glissement terminé.

Grâce aux trois méthodes ci-dessus, nous pouvons facilement implémenter les fonctions de tri de liste et de tri par glisser-déposer dans Vue, rendant nos applications plus interactives et plus faciles à utiliser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!