Vue Js Rearrange Image Position

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
  </head>

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

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

.image-container img {
        width: 150px;
        height: 150px;
        margin: 10px;
        cursor: grab;
        border-radius: 5px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease;
      }

.image-container img:active {
        cursor: grabbing;
      }

/* Optional styles for better visual feedback during dragging */
      .image-container img:hover {
        transform: scale(1.1);
        z-index: 1;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
      }

.image-container img:active {
        transform: scale(1.2);
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
      }
    </style>
  </body>
</html>