I have an image inside a wrapper div. I want to move the image vertically inside the div because the image does not fit. I found a few libs that do this in react but not many resources for Vue

I want to achieve a functionality like in Google Maps, where you can drag the map around. The map view always stays inside the wrapping container and the move extends only until the image top/bottom is reached

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