獲取移動div的實時位置？

Question

我想知道是否有一種方法可以使用.position()或.offset()獲取div的實時位置？

這裏是我的js代碼

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

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

但重裝這隻作品，當我移動一個div使用jQuery

Codepen

Answer 1

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

Answer 2

試試這個的配位不發生變化：

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

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

每隔1秒檢查一次div位置

Answer 3

它確實有效。你的代碼的問題是，你只在初始化時設置了位置。你可以使用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/

順便說一句，我改變了位置偏移，因爲我覺得這就是你想要的。