Javascript将元素移动到鼠标单击位置,元素没有响应



当用户在容器内单击时,我试图让我的png移动到鼠标单击位置,但我无法让png做出响应。我正在学习本教程(https://www.youtube.com/watch?v=b4GwvdhrEQg),并在第一次测试中卡住。我的目标根本不响应点击。请帮助

var theGirl = document.querySelector("#girl");
var container = document.querySelector("#floor");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var xPosition = e.clientX - (theGirl.offsetWidth / 2);
var yPosition = e.clientY; - (theGirl.offsetHeight / 2)
var translate3dValue = "translate3d(" + xPosition + "px" + yPosition + "px, 0)";
theGirl.style.transform = translate3dValue;
}
#floor {
width: 700px;
height: 600px;
cursor: pointer;
overflow: visible;
border: 10px #EDEDED solid;
}
#girl {
height: 450px;
width: 200px;
border: 15px red solid;
transform: translate3d(50px, 50px, 0);
}
<body>
<div id="floor">
<div>
<img src="girl.png" id="girl"> </div>
</div>

将#女孩的位置更改为绝对位置。我认为在那之后就行了。

最新更新