Holen Sie sich die Live-Position eines beweglichen div?

Question

Ich würde gerne wissen, ob es einen Weg gibt, um die Live-Position eines Div mit .position() oder .offset() zu bekommen?

Hier ist mein js Code

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

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

aber dies funktioniert nur auf reload werden die Koordinationen nicht ändern, wenn ich ein div mit jquery bewegen

Codepen

Answer 1

Mit setInterval können Sie das erreichen. Lesen Sie mehr here.

Unten ist ein Beispiel. 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

try this:

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

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

überprüfen div Position alle 1 Sekunde

Answer 3

Es funktioniert. Das Problem mit Ihrem Code ist, dass Sie die Position nur bei der Initialisierung festlegen. Sie können setInterval verwenden, um Ihre Position alle paar Millisekunden zu aktualisieren.

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

By the way, änderte ich Position zu kompensieren, weil ich das ist, denken, was Sie wollen.