javascript - 如何使用 javascript 获取翻译属性的 posX 和 posY？

Question

我正在使用 translate3d(..., ..., 0px) 进行自定义拖放，出于某些原因，我需要使用 Javascript 获取位置 X 和位置 Y，只是就像下面的例子。

transform: translate3d( 345 px, -76 px, 0px);

拖动时，translate3d 中的数字可以在 -9999 到 9999 之间变化。

有没有可能这样做？

Answer 1

你可以通过 offset() 或 position() 获取 div 的位置

offset() 获取您相对于整个文档的顶部和左侧位置

position() 获取元素父元素的顶部和左侧位置

正如您在下面的示例中看到的，position 比 offset 小 10px，因为它是相对于 section 的位置，top:10px;left:10px

因此您可以在动态函数中获取所需元素的位置/偏移量，例如可拖动函数(我想这就是您想要做的)

所以只需将 var 放入该函数中，它就会实时计算元素的偏移量/位置。

检查下面的片段

var divOff = $("div").offset(),
    divPos = $("div").position()

$("div").html("offset left:" + divOff.left + "offset top:" + divOff.top + "<br>" + "position left:" + divPos.left + "position top:" + divPos.top)

div {
	width:500px;
	height:100px;
	background:red;
	transform:translate(50px,100px)
}
section {
position:relative;
top:10px;
left:10px;
}
body {
	margin:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div>


</div>
</section>