Vue Js Rearrange Image Position | Drag and Drop

Vue Js rearrange Image Position :Vuejs is a progressive JavaScript framework that allows developers to dynamically rearrange image positions in just a few lines of code. By utilizing Vue’s data-binding and reactivity, developers can create interactive image rearrangement features. Users can drag and drop images to new positions on the screen, triggering updates in the underlying data structure.

Vue’s flexibility and component-based architecture make it easy to implement and customize such functionality, enhancing the user experience and enabling seamless image manipulation within the application.

How can I use Vuejs to dynamically rearrange the position of images on a web page?

This Vuejs code creates a simple image gallery where images can be rearranged using drag and drop functionality. Each image is displayed within a div, and the images are stored in an array in the data section. The v-for directive is used to loop through the images and display them dynamically. The @dragstart, @dragover, and @drop event listeners are used to handle the drag and drop interactions. When an image is dragged, its index is stored, and on drop, the array is rearranged to reflect the new order of images.

Vue Js Rearrange Image Position Example

<div id="app">
      <h3>Vue Js Rearrange Image Position</h3>
      <div class="image-container">
        <div
          v-for="(image, index) in images"
          :key="index"
          draggable="true"
          @dragstart="startDrag(index, $event)"
          @dragover="onDragOver($event)"
          @drop="onDrop(index, $event)"
        >
          <img :src="image.url" alt="Image" />
        </div>
      </div>
    </div>
    <script type="module">
      const app = Vue.createApp({
        data() {
          return {
            images: [
              {
                url: "https://www.sarkarinaukriexams.com/images/import/sne4446407201.png",
              },
              {
                url: "https://www.sarkarinaukriexams.com/images/import/sne86811832.png",
              },
              {
                url: "https://www.sarkarinaukriexams.com/images/import/sne10272423583.png",
              },
              {
                url: "https://www.sarkarinaukriexams.com/images/import/sne1586776004.png",
              },
              {
                url: "https://www.sarkarinaukriexams.com/images/import/sne20464172895.png",
              },
              // Add more images here
            ],
            isDragging: false,
            dragIndex: -1,
            dragOffset: 0,
          };
        },
        methods: {
          startDrag(index, event) {
            this.dragIndex = index;
            event.dataTransfer.effectAllowed = "move";
            // Setting dataTransfer with some data (we use "text" here, but it can be any data)
            event.dataTransfer.setData("text", index);
          },
          onDragOver(event) {
            event.preventDefault();
            event.dataTransfer.dropEffect = "move";
          },
          onDrop(index, event) {
            event.preventDefault();
            const movedImageIndex = event.dataTransfer.getData("text");
            if (movedImageIndex !== "") {
              const fromIndex = parseInt(movedImageIndex);
              const toIndex = index;

              // Rearrange the images array
              const movedImage = this.images[fromIndex];
              this.images.splice(fromIndex, 1);
              this.images.splice(toIndex, 0, movedImage);
            }
            this.dragIndex = -1;
          },
        },
      });

      app.mount("#app");
    </script>