jQuery可拖拽背景图的定位钉显示范围与联动移动问题

我已实现jQuery可拖拽背景图功能，并添加了一个名为I'm Pin的定位钉，但存在两个问题：

• I'm Pin超出了img容器范围
• 拖拽背景图区域时，I'm Pin无法跟随背景图同步移动

1. 确保I'm Pin不超出img容器范围 #

给#img容器添加position: relative样式，因为绝对定位的元素会以最近的相对定位父元素为基准进行定位，这样.pin的left/top就会相对于#img容器，而非整个页面，自然不会超出容器（只要初始定位值在容器尺寸范围内）。

2. 实现I'm Pin与背景图同步移动 #

背景图的拖拽通过调整background-position百分比实现，我们需要基于背景图的缩放比例反向计算定位钉的偏移量：

1. 获取背景图实际尺寸与容器尺寸，计算缩放比例
2. 记录定位钉相对于背景图的初始坐标（基于背景图原始尺寸）
3. 每次背景图位置更新时，根据当前background-position计算定位钉在容器内的新位置，更新其left和top值

修改后的完整代码 #

JavaScript代码

$(document).ready(function(){
    const container = document.querySelector('.img');
    const containerSize = container.getBoundingClientRect();
    const pin = document.querySelector('.pin');

    let imagePosition = { x: 50, y: 50 };
    let cursorPosBefore = { x: 0, y: 0 };
    let imagePosBefore = null;
    let imagePosAfter = imagePosition;
    let pinRelativePos = null; // 存储定位钉相对于背景图的初始位置
    let zoomLevels = null; // 存储背景图缩放比例

    // Helpers
    const minMax = (pos) => (pos < 0) ? 0 : (pos > 100) ? 100 : pos;
    
    const setNewCenter = (x, y) => {
      imagePosAfter = { x: x, y: y }; 
      container.style.backgroundPosition = `${x}% ${y}%`;
      // 更新定位钉位置
      updatePinPosition();
    };

    const getImageZoom = () => {
      return new Promise((resolve, reject) => {
        let actualImage = new Image();
        actualImage.src = $('#img').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
        actualImage.onload = function() {
          zoomLevels = {
            x: this.width / containerSize.width - 1,
            y: this.height / containerSize.height - 1
          };
          // 计算背景图实际尺寸
          const bgActualWidth = containerSize.width * (1 + zoomLevels.x);
          const bgActualHeight = containerSize.height * (1 + zoomLevels.y);
          // 计算定位钉相对于背景图的初始位置
          pinRelativePos = {
            x: (parseInt(pin.style.left) || 400) * (bgActualWidth / containerSize.width),
            y: (parseInt(pin.style.top) || 20) * (bgActualHeight / containerSize.height)
          };
          resolve(zoomLevels);
        }
      });
    };

    const updatePinPosition = () => {
      if (!pinRelativePos || !zoomLevels) return;
      const bgActualWidth = containerSize.width * (1 + zoomLevels.x);
      const bgActualHeight = containerSize.height * (1 + zoomLevels.y);
      
      // 计算背景图当前的偏移量（相对于居中位置）
      const bgOffsetX = (imagePosAfter.x - 50) / 100 * containerSize.width;
      const bgOffsetY = (imagePosAfter.y - 50) / 100 * containerSize.height;
      
      // 计算定位钉在容器内的新位置
      const newPinX = (pinRelativePos.x / bgActualWidth) * containerSize.width - bgOffsetX;
      const newPinY = (pinRelativePos.y / bgActualHeight) * containerSize.height - bgOffsetY;
      
      pin.style.left = `${newPinX}px`;
      pin.style.top = `${newPinY}px`;
    };
        
    const addEventListeners = () => {
      container.addEventListener('mousedown', function(event) {
        cursorPosBefore = { x: event.clientX, y: event.clientY };
        imagePosBefore = imagePosAfter; // 获取当前背景图位置
      });

      container.addEventListener('mousemove', function(event) {
          event.preventDefault();

          if (event.buttons === 0) return;

          let newXPos = imagePosBefore.x + ((cursorPosBefore.x - event.clientX) / containerSize.width * 100 / zoomLevels.x);
          let newYPos = imagePosBefore.y + ((cursorPosBefore.y - event.clientY) / containerSize.height * 100 / zoomLevels.y);

          setNewCenter(minMax(newXPos), minMax(newYPos));
      });
    };

    getImageZoom().then(addEventListeners);
});

CSS代码

#img {
  width: calc(100% - 250px);
  height: calc(100vh - 25px);
  background-position: 50% 50%;
  background-image: url('https://w7.pngwing.com/pngs/502/954/png-transparent-world-map-world-map-miscellaneous-world-map.png');
  cursor: move;
  border: 3px solid #5e5e5e;
  position: relative; /* 添加相对定位，作为绝对定位元素的基准 */
}

#img:active {
  border-color: #007fff;
}

.pin {
  position: absolute;
  left: 400px;
  top: 20px;
  background: #ff4444;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none; /* 避免干扰拖拽事件 */
}

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img" id="img">
  <div class="pin">I'm PIN</div>
</div>

内容的提问来源于stack exchange，提问作者HiDayurie Dave