获取移动div的实时位置？

Question

我想知道是否有办法使用 .position() 或 .offset() 获取 div 的实时位置？

这是我的 js 代码

var div = $('.btn').position();

$( ".live-position" ).text( "left: " + div.left + ", top: " + div.top ); // Get position of $('.btn)

但这只适用于重新加载，当我用 jquery

移动 div 时坐标没有改变

Codepen

Answer 1

试试这个：

setInterval(function() {
  var div = $('.btn').position();

   $( ".live-position" ).text( "left: " + div.left + ", top: " + div.top );
}, 1000);

每 1 秒检查 div 个位置

Answer 2

确实有效。您的代码的问题是，您仅在初始化时设置位置。您可以使用 setInterval 每隔几毫秒更新一次您的位置。

$('.btn').animate({ 'margin-left':'200px', 'margin-top':'70px'}, 3000)

setInterval(function(){
var div = $('.btn').offset();
$( ".live-position" ).text( "left: " + div.left + ", top: " + div.top );
}, 100);

https://jsfiddle.net/rpgpp2mp/

顺便说一句，我把位置改成了偏移量，因为我想这就是你想要的。

Answer 3

setInterval 你可以做到这一点。阅读更多 here.

下面是一个例子。 Updated CodePen

setInterval(function() {
  var div = $('.btn').position();
  $(".live-position").text("left: " + div.left + ", top: " + div.top);
}, 100);

$('.btn').animate({
  'margin-left': '200px',
  'margin-top': '70px'
}, 3000)

.btn {
  font-weight: bold;
  font-size: 5em;
}
.live-position {
  border: 1px solid black;
  margin: 1em;
  padding: 10px;
  display: inline-block;
}

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

<div class="live-position"></div>

获取移动div的实时位置？

Get the live position of a moving div?

jquery

position

coordinates