Comment utiliser Vue et Element-UI pour implémenter la fonction de tri par glisser-déposer

Comment utiliser Vue et Element-UI pour implémenter la fonction de tri par glisser-déposer

Avant-propos :
Dans le développement Web, la fonction de tri par glisser-déposer est une fonction courante et pratique. Cet article expliquera comment utiliser Vue et Element-UI pour implémenter la fonction de tri par glisser-déposer et démontrera le processus d'implémentation à travers des exemples de code.

1. Configuration de l'environnement

1. Installer Node.js
   Avant de commencer, vous devez installer Node.js. Vous pouvez visiter https://nodejs.org/ pour télécharger et installer la version correspondant au système d'exploitation.
2. Installer Vue CLI
   Vue CLI est un outil permettant de créer rapidement des projets Vue. Ouvrez l'outil de ligne de commande et exécutez la commande suivante pour installer Vue CLI :

npm install -g @vue/cli

3. Créer un projet Vue
   Exécutez la commande suivante dans la ligne de commande pour créer un nouveau projet Vue :

vue create drag -sort-demo

Suivez les invites pour sélectionner les options de configuration et attendez que le projet soit créé.

4. Installer Element-UI
   Entrez le répertoire du projet Vue que vous venez de créer et exécutez la commande suivante sur la ligne de commande pour installer Element-UI :

npm install element-ui

2 Implémentez le glisser-déposer. fonction de tri

1. Import Element -UI
   Importez les styles et composants d'Element-UI dans le fichier d'entrée src/main.js du projet Vue :

import Vue depuis 'vue';
import ElementUI depuis 'element- ui';
import 'element-ui /lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. Créer un composant de démonstration
   Créer un nouveau composant DragSortDemo.vue dans le fichier src/components répertoire pour démontrer la fonction de tri par glisser-déposer. Modifiez le fichier DragSortDemo.vue et ajoutez le code suivant :

<script><br>export default {<br> data () {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { list: [ { id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3, name: 'C' }, { id: 4, name: 'D' }, { id: 5, name: 'E' }, ], draggingId: null, };</pre><div class="contentsignin">Copier après la connexion</div></div><p>},<br> méthodes : {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>handleDragStart(item) { this.draggingId = item.id; }, handleDragEnd() { this.draggingId = null; }, handleSort() { const sortedList = Array.from(this.$el.querySelectorAll('.drag-item')).map((el, index) =&gt; { const id = el.getAttribute('data-id'); const name = el.textContent; return { id, name, sort: index + 1 }; }); // 将排序后的列表保存到数据库或发送给后端 },</pre><div class="contentsignin">Copier après la connexion</div></div><p>},<br>};<br></script>

Explication :

• Dans le modèle, utilisez la directive v-for pour restituer dynamiquement les éléments de la liste. La classe de l'élément de liste est liée à une propriété calculée, qui est utilisée pour déterminer si l'élément actuellement déplacé est l'élément de liste.
• Ajoutez l'attribut draggable à chaque élément de la liste et enregistrez les gestionnaires d'événements dragstart et dragend pour déclencher respectivement les événements de début et de fin du glisser. La méthode
• handleSort enregistre ou envoie les données de la liste triée par glisser-déposer au backend pour traitement.

3. Utilisation des composants
   Utilisez le composant DragSortDemo dans le fichier src/App.vue :