如何使用javascript獲取翻譯屬性的posX和posY？

Question

我出於自定義拖放目的使用了translate3d(..., ..., 0px) ，出於某些原因，我需要使用Javascript獲取位置X和位置Y，就像下面的示例一樣。

轉換：translate3d（ 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>