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每隔几毫秒更新一次您的位置。

$('.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 2

试试这个：

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

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

每隔1秒检查div位置

Answer 3

使用setInterval，您可以实现这一目标。阅读更多here。

以下是一个例子。 Updated CodePen

＆＃13;

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)

＆＃13;

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

＆＃13;

<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>

＆＃13;

获得移动div的实时位置？

3 个答案: