Comment implémenter les fonctions glisser-déposer et trier des images via Vue ?-Voir.js-php.cn

Comment implémenter les fonctions glisser-déposer et trier des images via Vue ?

WBOY

Libérer： 2023-08-18 17:05:14

original

1527 Les gens l'ont consulté

Comment implémenter les fonctions glisser-déposer et trier des images via Vue ?

Vue, en tant que framework JavaScript populaire, fournit des fonctions puissantes pour gérer les interfaces utilisateur. Dans cet article, nous apprendrons comment utiliser Vue pour implémenter des fonctions de déplacement et de tri d'images.

Tout d'abord, nous devons installer Vue et créer une instance Vue. Nous pouvons installer Vue via la commande suivante :

npm install vue

Copier après la connexion

Ensuite, créez un fichier HTML, introduisez les dépendances de Vue et créez une instance de Vue :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Drag and Sort Images</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <div class="image-container">
      <div class="image-card" v-for="(image, index) in images" :key="index" :style="{left: image.x + 'px', top: image.y + 'px'}" @mousedown="startDrag(index)" @mouseup="stopDrag(index)" @mousemove="drag(index)">
        <img :src="image.src" alt="Image">
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        images: [
          { src: 'image1.jpg', x: 0, y: 0 },
          { src: 'image2.jpg', x: 0, y: 0 },
          { src: 'image3.jpg', x: 0, y: 0 },
          { src: 'image4.jpg', x: 0, y: 0 }
        ],
        dragging: false,
        draggedIndex: -1,
        initialX: 0,
        initialY: 0
      },
      methods: {
        startDrag(index) {
          this.dragging = true;
          this.draggedIndex = index;
          this.initialX = event.clientX;
          this.initialY = event.clientY;
        },
        stopDrag(index) {
          if (this.dragging && this.draggedIndex !== -1) {
            this.images.splice(index, 0, this.images.splice(this.draggedIndex, 1)[0]);
          }
          this.dragging = false;
          this.draggedIndex = -1;
        },
        drag(index) {
          if (this.dragging && this.draggedIndex !== -1) {
            const dx = event.clientX - this.initialX;
            const dy = event.clientY - this.initialY;
            this.images[index].x += dx;
            this.images[index].y += dy;
            this.initialX = event.clientX;
            this.initialY = event.clientY;
          }
        }
      }
    });
  </script>
</body>
</html>

Copier après la connexion

Le code ci-dessus créera un conteneur d'images avec des fonctions de glisser-déposer et de tri. Nous utilisons la directive v-for pour parcourir le tableau images, et utilisons la directive v-bind pour lier la position de chaque image à le style CSS. v-for指令来遍历images数组，并使用v-bind指令将每个图片的位置绑定到CSS样式上。

在Vue实例的data属性中，我们定义了一个images数组，每个元素包含src、x和y属性。dragging、draggedIndex、initialX和initialY属性用于跟踪拖拽的状态和初始位置。

startDrag方法在鼠标按下时设置拖拽状态，并记录初始位置。

stopDrag方法在鼠标松开时停止拖拽，并根据拖拽的位置进行数组排序。

drag方法在鼠标移动时更新图片的位置。

以上代码实现了基本的拖拽和排序功能，但还可以进一步改进。

我们可以添加限制条件，使图片只能在容器范围内移动。为此，我们可以修改drag

Dans l'attribut data de l'instance Vue, nous définissons un tableau images, chaque élément contient src, x</ code > et <code>y. Les propriétés dragging, draggedIndex, initialX et initialY sont utilisées pour suivre l'état et la position initiale du glissement.

La méthode startDrag définit l'état de glisser lorsque la souris est enfoncée et enregistre la position initiale.

La méthode stopDrag arrête le glisser lorsque la souris est relâchée et trie le tableau en fonction de la position déplacée. 🎜🎜La méthode drag met à jour la position de l'image lorsque la souris bouge. 🎜🎜Le code ci-dessus implémente des fonctions de base de glisser-déposer et de tri, mais il peut être encore amélioré. 🎜🎜Nous pouvons ajouter des restrictions afin que l'image ne puisse être déplacée que dans le conteneur. À cette fin, nous pouvons modifier la méthode drag comme suit : 🎜

drag(index) {
  if (this.dragging && this.draggedIndex !== -1) {
    const dx = event.clientX - this.initialX;
    const dy = event.clientY - this.initialY;
    const container = document.querySelector('.image-container');
    const containerRect = container.getBoundingClientRect();
    const imageRect = event.target.getBoundingClientRect();

    if (
      imageRect.left + dx >= containerRect.left &&
      imageRect.right + dx <= containerRect.right &&
      imageRect.top + dy >= containerRect.top &&
      imageRect.bottom + dy <= containerRect.bottom
    ) {
      this.images[index].x += dx;
      this.images[index].y += dy;
      this.initialX = event.clientX;
      this.initialY = event.clientY;
    }
  }
}

Copier après la connexion

🎜De cette façon, l'image ne peut être glissée et déplacée que dans la plage du conteneur. 🎜🎜Avec cet exemple de code simple, nous avons appris à utiliser Vue pour implémenter les fonctions de glisser-déposer et de tri des images. Dans les projets réels, vous pouvez améliorer et étendre cette fonction en fonction de vos propres besoins. 🎜

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!