Comment utiliser Vue et Element-UI pour implémenter des fonctions de glisser et de tri de données

Comment utiliser Vue et Element-UI pour implémenter des fonctions de déplacement et de tri de données

Introduction :
Avec le développement d'applications Web, les fonctions de déplacement et de tri de données sont devenues un élément nécessaire de nombreuses applications. En tant que framework JavaScript moderne, Vue.js fournit des méthodes pratiques de liaison de données et de développement basées sur des composants, tandis qu'Element-UI, en tant que framework d'interface utilisateur basé sur Vue.js, fournit une série d'excellents composants et effets interactifs. Cet article expliquera comment utiliser Vue et Element-UI pour implémenter des fonctions de déplacement et de tri de données, et donnera un exemple de code.

1. Préparation
   Avant de commencer, nous devons préparer l'environnement de développement pertinent. Tout d’abord, assurez-vous que Node.js et npm sont installés. Ensuite, installez Vue et Element-UI via npm.

   npm install vue
   npm install element-ui

   Une fois l'installation terminée, créez un nouveau projet Vue et introduisez la bibliothèque Element-UI.

   vue create drag-sort-demo
   cd drag-sort-demo
   npm install element-ui

   Ensuite, introduisez Vue et Element-UI dans le fichier d'entrée main.js de Vue et utilisez la méthode Vue.use() pour enregistrer les composants Element-UI.

   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(ElementUI)
   
   new Vue({
     render: h => h(App)
   }).$mount('#app')

   À ce stade, nous avons terminé le travail de préparation et nous commencerons ensuite à implémenter la fonction de glisser et de trier les données.

2. Implémentation de la liste de données
   Tout d'abord, nous devons créer une liste de données pour afficher les éléments de données qui peuvent être glissés et triés. Dans les composants Vue, vous pouvez utiliser la directive v-for pour parcourir la liste de données et utiliser le composant el-card pour afficher chaque élément de données.

   <template>
     <div>
    <el-card v-for="item in list" :key="item.id">
      {{ item.name }}
    </el-card>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      list: [
        { id: 1, name: '数据项1' },
        { id: 2, name: '数据项2' },
        { id: 3, name: '数据项3' },
        { id: 4, name: '数据项4' },
        { id: 5, name: '数据项5' }
      ]
    }
     }
   }
   </script>

   Maintenant, nous avons terminé l'affichage de la liste des données.

3. Ajouter une fonction glisser-déposer
   Ensuite, nous ajouterons une fonction glisser-déposer pour chaque élément de données. Dans Element-UI, vous pouvez utiliser la directive el-draggable pour implémenter la fonction glisser-déposer. Nous pouvons ajouter la directive el-draggable au composant el-card et lier une propriété liée à l'élément de données.

   <template>
     <div>
    <el-card v-for="item in list" :key="item.id" v-el-draggable="item">
      {{ item.name }}
    </el-card>
     </div>
   </template>
   
   <script>
   export default {
     // ...
     directives: {
    'el-draggable': {
      bind(el, binding, vnode) {
        el.draggable = true
        el.addEventListener('dragstart', (event) => {
          event.dataTransfer.setData('text/plain', JSON.stringify(binding.value))
        })
      }
    }
     }
   }
   </script>

   Dans la directive el-draggable, nous définissons l'attribut draggable de l'élément sur true pour activer la fonctionnalité de glissement. Ensuite, dans l'événement dragstart, nous stockons la valeur de l'élément de données actuel sous forme de chaîne JSON dans l'objet DataTransfer.

4. Ajouter une fonction de tri
   En plus de la fonction glisser-déposer, nous devons également implémenter la fonction de tri après avoir fait glisser les éléments de données vers la position spécifiée. Dans Element-UI, vous pouvez utiliser la directive el-dropzone pour implémenter la fonction de tri. Nous pouvons ajouter la directive el-dropzone au conteneur où se trouve le composant el-card et lier une propriété liée à la liste de données.

   <template>
     <div v-el-dropzone="list">
    <el-card v-for="item in list" :key="item.id" v-el-draggable="item">
      {{ item.name }}
    </el-card>
     </div>
   </template>
   
   <script>
   export default {
     // ...
     directives: {
    'el-draggable': {
      // ...
      bind(el, binding, vnode) {
        // ...
        el.addEventListener('dragend', () => {
          vnode.context.$forceUpdate();
        })
      }
    },
    'el-dropzone': {
      bind(el, binding, vnode) {
        el.addEventListener('dragover', (event) => {
          event.preventDefault()
        })
        el.addEventListener('drop', (event) => {
          event.preventDefault()
          const draggedItem = JSON.parse(event.dataTransfer.getData('text/plain'))
          const newList = binding.value.slice()
          const index = newList.findIndex(item => item.id === draggedItem.id)
          newList.splice(index, 1)
          newList.splice(el.dataset.index, 0, draggedItem)
          vnode.context[binding.expression] = newList
        })
      }
    }
     }
   }
   </script>

   Dans la directive el-dropzone, nous appelons la méthode PreventDefault dans l'événement dragover pour empêcher le comportement de glisser-déposer par défaut du navigateur. Ensuite, lors de l'événement drop, nous récupérons l'élément de données déplacé et trouvons sa position dans la liste de données d'origine en fonction de son identifiant. Nous créons ensuite une nouvelle copie de la liste de données, supprimons l'élément de données déplacé et insérons l'élément de données à l'emplacement spécifié. Enfin, nous mettons à jour la liste des données en modifiant les attributs de données correspondants dans l'instance Vue.

5. Affichage des effets

Après avoir mis en œuvre les étapes ci-dessus, nous avons terminé le développement des fonctions de glissement et de tri des données. Nous pouvons maintenant exécuter le projet et voir l'effet.

npm run serve

Ouvrez le navigateur et visitez http://localhost:8080 pour voir la liste des données avec les fonctions de glisser-déposer et de tri.

Conclusion :
Cet article explique comment utiliser Vue et Element-UI pour implémenter des fonctions de glisser et de tri de données. En utilisant les directives el-draggable et el-dropzone, nous pouvons facilement ajouter des fonctionnalités de glisser et de tri à la liste de données. J'espère que cet article sera utile aux développeurs qui développent des applications Web afin qu'ils puissent implémenter cette fonction commune plus efficacement.

Lien de référence :

• Documentation officielle de Vue : https://cn.vuejs.org/
• Documentation officielle d'Element-UI : https://element.eleme.io/

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!