Question

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

转换：translate3d（ 345 px， -76 px，0px）;

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

这样做有可能吗？

Answer 1

您可以使用offset（）或position（）

获取div的位置

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

position()将您的左上角和左上角置于元素的父级

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

所以你可以在动态函数中得到所需元素的位置/偏移量，比如可拖动函数（我假设你想要做什么）

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

检查下面的代码段

＆＃13;

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)

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用javascript获取translate属性的posX和posY？

1 个答案: