Bagaimana untuk melaksanakan fungsi drag-and-drop dan pengisihan imej melalui Vue?-View.js-php.cn

Bagaimana untuk melaksanakan fungsi drag-and-drop dan pengisihan imej melalui Vue?

WBOY

Lepaskan： 2023-08-18 17:05:14

asal

1569 orang telah melayarinya

Bagaimana untuk melaksanakan fungsi drag-and-drop dan pengisihan imej melalui Vue?

Bagaimana untuk melaksanakan fungsi seret dan lepas dan mengisih imej melalui Vue?

Vue, sebagai rangka kerja JavaScript yang popular, menyediakan fungsi berkuasa untuk mengendalikan antara muka pengguna. Dalam artikel ini, kita akan belajar cara menggunakan Vue untuk melaksanakan fungsi menyeret dan menyusun imej.

Mula-mula, kita perlu memasang Vue dan mencipta contoh Vue. Kita boleh memasang Vue melalui arahan berikut:

npm install vue

Salin selepas log masuk

Seterusnya, cipta fail HTML, perkenalkan kebergantungan Vue dan buat contoh 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>

Salin selepas log masuk

Kod di atas akan mencipta bekas imej dengan fungsi seret dan lepas dan pengisihan. Kami menggunakan arahan v-for untuk lelaran melalui tatasusunan imej dan menggunakan arahan v-bind untuk mengikat kedudukan setiap imej kepada gaya CSS. v-for指令来遍历images数组，并使用v-bind指令将每个图片的位置绑定到CSS样式上。

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

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

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

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

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

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

Dalam atribut data contoh Vue, kami mentakrifkan tatasusunan imej, setiap elemen mengandungi src, x</ code > dan atribut <code>y. Sifat dragging, draggedIndex, initialX dan initialY digunakan untuk menjejak status dan kedudukan awal penyeretan.

Kaedah startDrag menetapkan keadaan seret apabila tetikus ditekan dan merekodkan kedudukan awal.

KaedahstopDrag berhenti menyeret apabila tetikus dilepaskan dan mengisih tatasusunan mengikut kedudukan yang diseret. 🎜🎜 Kaedahdrag mengemas kini kedudukan imej apabila tetikus bergerak. 🎜🎜Kod di atas melaksanakan fungsi seret dan lepas dan pengisihan asas, tetapi ia boleh dipertingkatkan lagi. 🎜🎜Kami boleh menambah sekatan supaya imej hanya boleh dialihkan dalam bekas. Untuk tujuan ini, kita boleh mengubah suai kaedah drag seperti berikut: 🎜

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;
    }
  }
}

Salin selepas log masuk

🎜Dengan cara ini, imej hanya boleh diseret dan dialihkan dalam julat bekas. 🎜🎜Dengan contoh kod ringkas ini, kami mempelajari cara menggunakan Vue untuk melaksanakan fungsi seret dan lepas dan isihan imej. Dalam projek sebenar, anda boleh menambah baik dan mengembangkan fungsi ini mengikut keperluan anda sendiri. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi drag-and-drop dan pengisihan imej melalui Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!