Question

我想根据数据库中的坐标移动图像。

我已经可以移动图像（东西）了。但是，例如，我有x坐标为293，y坐标为715，图像最终移动到293和715但是图像（事物）我移动的是像箭头一样的箭头 this

所以我必须移动图像，但图像的左上部分应该是定位坐标而不是中心部分的部分。有谁可以帮助我解决我的问题？任何帮助将不胜感激

到目前为止我的脚本

<script>
function getClickPosition($valuex,$valuey) {
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var x1 = document.getElementById('valuex').value;
var y1 = document.getElementById('valuey').value;
var parentPosition = getPosition(x1.currentTarget);
var parentPosition = getPosition(y1.currentTarget);
var xPosition = x1 - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = y1- parentPosition.y - (theThing.clientHeight / 2);

theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";

function getPosition(element) {
var xPosition = 0;
var yPosition = 0;

while (element) {
    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
    element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
</script>

Answer 1

默认情况下，该位置相对于左上角。你必须手动抵消它以获得其他任何东西。这就是theThing.clientWidth /2和theThing.clientHeight / 2在您的代码中所做的事情：将位置向上移动并向左移动一半的高度/宽度。如果您只想使用左上角的位置，请将其替换为：

var xPosition = x1 - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = y1 - parentPosition.y - (theThing.clientHeight / 2);

有了这个：

var xPosition = x1 - parentPosition.x;
var yPosition = y1 - parentPosition.y;

使用javascript移动图像时出现问题

1 个答案: