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

Question

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

变换： 翻译3d( 345 px， -76 px， 0px(;

拖动时，translate3d 中的数字可以从 -9999 到 9999 不等。

这样做有什么可能吗？

Answer 1

你可以用offset((或position((得到div的位置

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

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

正如您在下面的示例中看到的，位置小于偏移量 10px，因为它相对于具有top:10px;left:10px的section的位置

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

因此，只需将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>