Home > Article > Web Front-end > How to implement drag-and-drop and sorting functions of images through Vue?

How to implement drag-and-drop and sorting functions of images through Vue?

WBOYOriginal: 2023-08-18 17:05:141518browse

How to implement the drag and drop and sorting functions of images through Vue?

Vue, as a popular JavaScript framework, provides powerful functions for handling user interfaces. In this article, we will learn how to use Vue to implement image dragging and sorting functions.

First, we need to install Vue and create a Vue instance. We can install Vue through the following command:

npm install vue

Next, create an HTML file, introduce Vue dependencies, and create a Vue instance:

<!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>

The above code will create a drag and drop Image container with sorting functionality. We use the v-for directive to iterate through the images array, and the v-bind directive to bind the position of each image to the CSS style.

In the data attribute of the Vue instance, we define an images array, each element contains src, x and y attributes. The dragging, draggedIndex, initialX, and initialY properties are used to track the status and initial position of dragging.

startDrag method sets the drag state when the mouse is pressed and records the initial position.

stopDrag method stops dragging when the mouse is released, and sorts the array according to the dragged position.

drag method updates the position of the image when the mouse moves.

The above code implements basic drag-and-drop and sorting functions, but it can be further improved.

We can add restrictions so that the image can only be moved within the container. To this end, we can modify the drag method as follows:

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

In this way, the image will only be dragged and moved within the container range.

Through this simple code example, we learned how to use Vue to implement the drag-and-drop and sorting functions of images. In actual projects, you can improve and expand this function according to your own needs.

The above is the detailed content of How to implement drag-and-drop and sorting functions of images through Vue?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html for

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement exposure and highlight processing of images through Vue?Next article：How to implement exposure and highlight processing of images through Vue?

See more

How to implement drag-and-drop and sorting functions of images through Vue?

Related articles