求助：可移动元素触碰图片时切换图片的代码合并实现

核心思路是把元素移动代码里的enterDroppable函数逻辑，从修改背景色替换为修改目标图片的src属性，同时整合两段代码的功能。

完整实现代码 #

<!DOCTYPE html>
<html>
<body>
  <!-- 目标图片：初始为img2a，触碰后切换为img2b -->
  <img src="img2a.jpg" id="gate" class="droppable" style="display: inline-block;">
  
  <!-- 可移动元素：img1 -->
  <img src="img1.jpg" id="ball" style="cursor: move;">

  <script>
    let currentDroppable = null;
    // 提前获取目标图片元素，避免重复DOM查询
    const targetImg = document.getElementById('gate');
    // 定义切换前后的图片地址
    const img2aSrc = "img2a.jpg";
    const img2bSrc = "img2b.jpg";

    ball.onmousedown = function(event) {
      let shiftX = event.clientX - ball.getBoundingClientRect().left;
      let shiftY = event.clientY - ball.getBoundingClientRect().top;

      ball.style.position = 'absolute';
      ball.style.zIndex = 1000;
      document.body.append(ball);

      moveAt(event.pageX, event.pageY);

      function moveAt(pageX, pageY) {
        ball.style.left = pageX - shiftX + 'px';
        ball.style.top = pageY - shiftY + 'px';
      }

      function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);

        ball.hidden = true;
        let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
        ball.hidden = false;

        if (!elemBelow) return;

        let droppableBelow = elemBelow.closest('.droppable');
        if (currentDroppable != droppableBelow) {
          if (currentDroppable) {
            leaveDroppable(currentDroppable);
          }
          currentDroppable = droppableBelow;
          if (currentDroppable) {
            enterDroppable(currentDroppable);
          }
        }
      }

      document.addEventListener('mousemove', onMouseMove);

      ball.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        ball.onmouseup = null;
      };
    };

    // 触碰时切换为img2b
    function enterDroppable(elem) {
      targetImg.src = img2bSrc;
    }

    // 可选：离开时切回img2a，如果不需要可以删除这个函数及调用
    function leaveDroppable(elem) {
      targetImg.src = img2aSrc;
    }

    ball.ondragstart = function() {
      return false;
    };
  </script>
</body>
</html>

关键修改点说明 #

• 提前获取目标图片元素targetImg，并定义切换前后的图片地址常量，提升代码可读性和性能。
• 把enterDroppable函数里的背景色修改代码替换为targetImg.src = img2bSrc;，直接修改图片的源地址。
• 如果需要在元素离开时切回原图片，保留leaveDroppable函数；如果只需要触碰一次切换，删除leaveDroppable函数及onMouseMove里的调用即可。
• 保留了原移动代码的核心逻辑：鼠标拖动定位、元素碰撞检测（通过elementFromPoint和closest('.droppable')实现）。

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