Comment afficher l'icône interdite lors du glisser dans la vue

À mesure que le développement front-end devient de plus en plus populaire, l'utilisation de frameworks JavaScript devient de plus en plus populaire lors de l'écriture de sites Web ou d'applications. Vue.js est l'un des frameworks JavaScript les plus populaires et il offre de nombreux moyens pratiques de créer des interfaces utilisateur réactives et interactives. Il est très courant d'implémenter la fonction glisser-déposer dans Vue.js. Cet article explique comment utiliser la fonction glisser-déposer dans Vue.js et afficher l'icône d'interdiction lors du glisser.

Étape 1 : Installez et importez le plug-in Vue.draggable

Le plug-in Vue.draggable est un plug-in très utile qui vous permet d'implémenter facilement la fonctionnalité glisser-déposer dans Vue. Pour installer ce plugin, vous pouvez utiliser l'outil de gestion de packages npm, et vous pouvez utiliser la commande suivante :

npm install vuedraggable --save

Après avoir terminé l'installation, vous devez importer le plugin Vue.draggable dans le projet Vue :

import draggable from 'vuedraggable'
Vue.component('draggable', draggable)

Étape 2 : Utilisez la fonction glisser-déposer d'implémentation de Vue.draggable

Maintenant que vous avez installé et importé avec succès le plugin Vue.draggable, nous allons ensuite l'utiliser pour implémenter la fonctionnalité glisser-déposer. Tout d’abord, nous devons définir l’élément que nous voulons faire glisser dans le modèle.

<template>
  <div>
    <div class="container">
      <div class="item" v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </div>
    <draggable :list="items" :options="{ handle:&#39;.handle&#39; }" @end="onEnd">
      <div class="draggable-item handle">{{ items }}</div>
    </draggable>
  </div>
</template>

Dans le modèle ci-dessus, nous avons utilisé le plugin Vue.draggable pour implémenter notre fonctionnalité glisser-déposer. Nous définissons un conteneur avec plusieurs éléments et chaque élément contient un index et une valeur dans le tableau "items". Nous définissons également un élément déplaçable que nous pouvons glisser et déposer dans un conteneur.

Après avoir défini l'élément, nous devons définir une méthode pour répondre aux événements glisser-déposer. Dans cette méthode, nous pouvons vérifier si l'événement glisser-déposer s'est produit en dehors du conteneur. Si tel est le cas, nous pouvons afficher une icône de désactivation.

methods: {
  onEnd(event) {
    const nodeList = document.querySelectorAll('.vuedraggable-container')
    const dragList = nodeList[0].getBoundingClientRect()
    const container = document.querySelector('.container').getBoundingClientRect()
    if (dragList.top < container.top || dragList.bottom > container.bottom) {
      event.preventDefault()
      console.log('Do not drop outside of the container!')
    }
  }
},

Dans cette méthode, nous obtenons d'abord la position du conteneur et vérifions si l'événement de glissement s'est produit à l'extérieur du conteneur. Si tel est le cas, nous utilisons la méthode event.preventDefault() pour empêcher le comportement par défaut de l'événement glisser-déposer et afficher un message d'avertissement.

La dernière chose à retenir en termes d'implémentation de code est d'ajouter un style au conteneur.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}
.item {
  flex: 1;
  margin: 5px;
  padding: 10px;
  background: #eee;
  text-align: center;
  cursor: move;
}
.draggable-item {
  margin: 5px;
  padding: 10px;
  background: #7a7a7a;
  color: #fff;
  text-align: center;
  cursor: move;
}

Ici, nous définissons un style de conteneur et un style d'élément. Nous avons également ajouté des styles pour les éléments déplaçables.

Maintenant, nous avons implémenté avec succès la fonctionnalité glisser-déposer dans Vue.js, lorsqu'un élément est déplacé, une icône de désactivation s'affiche. Il s'agit d'un moyen simple d'implémenter une exigence très courante, et en utilisant Vue.js et ses plug-ins, nous pouvons implémenter plus facilement des fonctionnalités complexes de glisser-déposer.

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!