如何基于原窗口鼠标位置在容器内模拟定位div元素？

要实现原窗口鼠标位置在目标容器内的精准映射，核心是基于相对位置比例计算，而非直接使用原窗口的绝对坐标。以下是两种可行的实现方案：

方案一：利用已提供的百分比数据 #

用户输入中已经给出了鼠标在原窗口的相对百分比（x_pct、y_pct），直接将该比例应用到目标容器即可：

// 获取目标容器的实际尺寸
const container = document.getElementById('你的容器ID');
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;

// 转换百分比为目标容器内的绝对坐标
const targetX = (parseFloat(userInput.mouse.x_pct) / 100) * containerWidth;
const targetY = (parseFloat(userInput.mouse.y_pct) / 100) * containerHeight;

// 设置元素位置（需确保容器position为relative/absolute/fixed）
element.style.position = 'absolute';
element.style.left = `${targetX}px`;
element.style.top = `${targetY}px`;

方案二：手动计算相对比例（无百分比数据时适用） #

如果没有现成的百分比数据，可通过原窗口与目标容器的尺寸比例推导：

转换公式 #

目标X坐标 = (原鼠标X坐标 / 原窗口宽度) * 目标容器宽度
目标Y坐标 = (原鼠标Y坐标 / 原窗口高度) * 目标容器高度

代码实现 #

const container = document.getElementById('你的容器ID');
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;

// 计算鼠标在原窗口的相对比例
const xRatio = userInput.mouse.x / userInput.window.width;
const yRatio = userInput.mouse.y / userInput.window.height;

// 转换为目标容器内的坐标
const targetX = xRatio * containerWidth;
const targetY = yRatio * containerHeight;

// 设置元素位置
element.style.position = 'absolute';
element.style.left = `${targetX}px`;
element.style.top = `${targetY}px`;

额外注意事项 #

• 确保目标容器的position属性不为static（推荐设为relative），这样元素的left/top才会相对于容器定位。
• 如果需要让元素中心对齐原鼠标位置，需减去元素自身宽高的一半：

  const elementWidth = element.offsetWidth;
  const elementHeight = element.offsetHeight;
  element.style.left = `${targetX - elementWidth / 2}px`;
  element.style.top = `${targetY - elementHeight / 2}px`;
  

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