Conseils et bonnes pratiques pour la sélection et le placement par glisser-déposer dans Vue

Vue est un framework JavaScript populaire adapté à la création d'applications monopage (SPA). Il prend en charge les fonctions de sélection et de placement par glisser-déposer via des instructions et des composants, offrant aux utilisateurs une meilleure expérience interactive. Cet article présentera les techniques et les meilleures pratiques pour la sélection et le placement par glisser-déposer dans Vue.

1. Commande Drag

Vue fournit une commande v-déplaçable qui peut facilement obtenir des effets de glisser. Cette commande peut être appliquée à n'importe quel élément et peut personnaliser le style de déplacement, limiter la plage de déplacement, etc.

Voici un exemple simple :

<template>
  <div v-draggable>
    拖拽我
  </div>
</template>
<script>
  import draggable from 'vuedraggable'
  export default {
    directives: {
      draggable
    }
  }
</script>

Dans l'exemple ci-dessus, nous avons importé la directive fournie par la bibliothèque vuedraggable et déclaré la directive dans le composant Vue. Les éléments utilisant v-draggable peuvent être glissés par l'utilisateur.

2. Sélectionner et décocher

Dans les opérations de glisser-déposer, vous devez généralement cliquer pour sélectionner un élément avant de pouvoir le faire glisser. Voici un exemple de code pour implémenter la sélection et la désélection :

<template>
  <div v-for="(item, index) in items"
       :key="index"
       :class="{selected: index === selectedIndex}"
       @mousedown="onSelect(index)"
       @mouseup="onDeselect"
       v-draggable>
      {{ item }}
  </div>
</template>
<script>
  import draggable from 'vuedraggable'
  export default {
    directives: {
      draggable
    },
    data () {
      return {
        items: ['Item 1', 'Item 2', 'Item 3'],
        selectedIndex: null
      }
    },
    methods: {
      onSelect (index) {
        this.selectedIndex = index
      },
      onDeselect () {
        this.selectedIndex = null
      }
    }
  }
</script>

Dans l'exemple ci-dessus, nous utilisons une boucle v-for pour afficher la liste et stocker l'index de l'élément actuellement sélectionné par l'utilisateur via la variable selectedIndex. Lorsque l'élément est cliqué, la méthode onSelect sera appelée pour mettre à jour la variable selectedIndex ; lorsque la souris est levée, le selectedIndex sera mis à jour pour être vide, indiquant que l'utilisateur a annulé l'opération de sélection.

3. Limitations du déplacement

Lors des opérations de déplacement, il est parfois nécessaire de limiter la portée et la direction du déplacement. Vue propose plusieurs façons d'implémenter cette restriction.

3.1. Limiter la plage

En passant un objet contenant les coordonnées de début et de fin dans v-draggable, vous pouvez limiter la plage de déplacement. Voici l'exemple de code :

<template>
  <div v-for="(item, index) in items"
       :key="index"
       :class="{selected: index === selectedIndex}"
       @mousedown="onSelect(index)"
       @mouseup="onDeselect"
       v-draggable="{startX: 0, startY: 0, endX: 100, endY: 100}">
      {{ item }}
  </div>
</template>

Dans l'exemple ci-dessus, nous limitons la plage de déplacement du coin supérieur gauche (0, 0) au coin inférieur droit (100, 100), et l'utilisateur ne peut pas faire glisser l'élément en dehors de cette zone. gamme.

3.2. Limiter la direction

En passant l'attribut axis dans v-draggable, vous pouvez limiter la direction de déplacement de l'élément. Voici l'exemple de code :

<template>
  <div v-for="(item, index) in items"
       :key="index"
       :class="{selected: index === selectedIndex}"
       @mousedown="onSelect(index)"
       @mouseup="onDeselect"
       v-draggable="{axis: 'x'}">
      {{ item }}
  </div>
</template>

Dans l'exemple ci-dessus, nous définissons l'axe sur « x », ce qui signifie que l'élément ne peut être déplacé que dans la direction horizontale.

4. Opération Placer

Une fois le glissement terminé, il est généralement nécessaire de placer l'élément à l'emplacement spécifié. Vue fournit une directive v-droppable qui peut être utilisée pour implémenter des opérations de suppression.

Ce qui suit est un processus d'implémentation simple :

<template>
  <div>
    <div v-for="(item, index) in items"
         :key="index"
         :class="{selected: index === selectedIndex}"
         @mousedown="onSelect(index)"
         @mouseup="onDeselect"
         v-draggable>
        {{ item }}
    </div>
    <div v-droppable @drop="onDrop">
      放置目标
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        items: ['Item 1', 'Item 2', 'Item 3'],
        selectedIndex: null
      }
    },
    methods: {
      onSelect (index) {
        this.selectedIndex = index
      },
      onDeselect () {
        this.selectedIndex = null
      },
      onDrop (evt) {
        const droppedItem = this.items[this.selectedIndex]
        this.$set(this.items, this.selectedIndex, null)
        this.$set(this.items, evt.target.dataset.index, droppedItem)
        this.selectedIndex = null
      }
    }
  }
</script>

Dans l'exemple ci-dessus, nous utilisons la directive v-droppable pour définir un élément div comme cible de dépôt lorsque l'utilisateur fait glisser et dépose l'élément glissé sur l'élément div. L'événement drop sera déclenché et nous implémentons l'opération de placement de l'élément dans la méthode onDrop.

Bien que le code ci-dessus puisse implémenter l'opération de placement d'éléments, il présente encore quelques défauts. Par exemple, nous ne pouvons pas connaître la position de l'élément cible à partir de l'élément déplacé. À l'heure actuelle, nous pouvons utiliser certaines interfaces supplémentaires d'événements glisser-déposer pour résoudre ce problème.

5. Bonnes pratiques

La mise en œuvre d'une opération de glisser-déposer fluide nécessite une prise en compte approfondie de plusieurs aspects. Nous devons donc faire de notre mieux pour respecter les meilleures pratiques suivantes en pratique :

• Utiliser des événements natifs et le glisser-déposer supprimez les interfaces d'événements autant que possible, au lieu d'implémenter une logique de glisser-déposer personnalisée.
• Restreindre le fonctionnement du glisser-déposer des éléments, par exemple en limitant la portée et la direction, pour garantir l'expérience utilisateur.
• Lorsque vous effectuez des opérations de placement, vous devez prendre en compte divers facteurs, par exemple si d'autres éléments le bloquent.
• Lors de la mise en œuvre des opérations de glisser-déposer, il est nécessaire de garantir l'évolutivité et la maintenabilité du code.

En bref, grâce à l'utilisation flexible des instructions et des interfaces d'événements glisser-déposer, nous pouvons non seulement réaliser des opérations de glisser-déposer fluides, mais également améliorer l'expérience utilisateur et apporter de meilleurs effets interactifs aux applications.

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!