Tengo una imagen dentro de un contenedor div. Quiero mover la imagen verticalmente dentro del div porque la imagen no encaja. Encontré algunas librerías que hacen esto en reacción pero no muchos recursos para Vue

Quiero lograr una funcionalidad como en Google Maps, donde puedes arrastrar el mapa. La vista del mapa siempre permanece dentro del contenedor envolvente y el movimiento se extiende solo hasta que se alcanza la parte superior/inferior de la imagen.

 <script setup> ... onMounted(() => { let bgDiv = document.getElementById("test"); bgDiv.addEventListener('mousemove', e => { let y = e.offsetY; bgDiv.style.cssText = `transform: translate3d(0, ${y}px, 0)`; }); }) </script> <div class="test" id="test"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet" class="svg-content"> <!-- overhead appears when viewbox > image, otherwise should be fine, so just make them match/fit --> <image width="1920" height="1080" xlink:href="@/assets/background.gif"></image> <a class="cursor-pointer" data-bs-toggle="modal" data-bs-target="#"> <rect x="618" y="140" fill="#fff" opacity="0.5" width="155" height="940"/> </a> </svg> </div>