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 :

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<div class="drag-sort-demo">
  <el-collapse-transition>
    <div v-for="item in list" :key="item.id" class="drag-item" :class="{ 'dragging': draggingId === item.id }" draggable="true" @dragstart="handleDragStart(item)" @dragend="handleDragEnd(item)">
      {{ item.name }}
    </div>
  </el-collapse-transition>
</div>
<el-button type="primary" @click="handleSort">保存排序</el-button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
data () {

return {
  list: [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 3, name: 'C' },
    { id: 4, name: 'D' },
    { id: 5, name: 'E' },
  ],
  draggingId: null,
};

},
méthodes : {

handleDragStart(item) {
  this.draggingId = item.id;
},
handleDragEnd() {
  this.draggingId = null;
},
handleSort() {
  const sortedList = Array.from(this.$el.querySelectorAll('.drag-item')).map((el, index) => {
    const id = el.getAttribute('data-id');
    const name = el.textContent;
    return { id, name, sort: index + 1 };
  });
  // 将排序后的列表保存到数据库或发送给后端
},

},
};
2cacc6d41bbb37262a98f745aa00fbf0

30e8033e360bcffb1ce9b4703e10b64c
.drag-sort-demo {
display: flex;
flex-wrap : wrap ;
}

.drag-item {
padding: 10px;
margin: 10px 0;
background-color: #f5f5f5;
border: 1px solid #ebebeb;
curseur: move;
transition: box-shadow 0.3s ;
}

.drag-item.dragging {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
531ac245ce3e4fe3d50054a55f265927

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 :

d477f9ce7bf77f53fbcf36bec1b69b7a
2e4c03ba1a844f9ccaa1fdeb1b48713f

<drag-sort-demo></drag-sort-demo>

16b28748ea4df4d9c2150843fecfba68

3f1c4e4b6b16bbbd69b2ee476dc4f83a
importer DragSortDemo depuis './components/DragSortDemo.vue';

exporter les {
composants par défaut : {

DragSortDemo,

},
};
2cacc6d41bbb37262a98f745aa00fbf0

3. le projet
Exécutez la commande suivante dans la ligne de commande pour démarrer le projet :

npm run serve

Visitez http://localhost:8080 pour voir la page de démonstration de la fonction de tri par glisser-déposer. Faites glisser les éléments de la liste pour modifier le tri, puis cliquez sur le bouton Enregistrer le tri pour enregistrer les résultats du tri.

Conclusion :
Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de tri par glisser-déposer à l'aide de Vue et Element-UI. Cela fournit une solution simple et pratique pour notre développement Web, qui peut améliorer l’expérience utilisateur et optimiser l’interaction avec l’interface. J'espère que cet article pourra être utile au travail de développement front-end de chacun.

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!