jQuery: getting the coordinates of a draggable object

by jimkennelly

HTML

<div id="container" style="position: relative;">
<div  class="box" id="job6507" style="background:blue;float:left;">ST003VT </div>
<div class="box" id="job6508" style="background:blue;float:left;">ST004VT </div>
<div class="box" id="job6509" style="background:blue;float:left;">ST010VT </div>
<div class="box" id="job6510" style="background:red;float:left;">ST011VT </div>
<div class="box" id="job6511" style="background:blue;float:left;">ST012VT </div>
<div class="box" id="job6512" style="background:blue;float:left;">ST013VT </div>
<div class="box" id="job6513" style="background:blue;float:left;">ST014VT </div>
<div class="box" id="job6514" style="background:blue;float:left;">ST015VT </div>
<div class="box" id="job6515" style="background:blue;float:left;">ST016VT </div>
<div class="box" id="job6516" style="background:blue;float:left;">ST017VT </div>
<div class="box" id="job6517" style="background:blue;float:left;">ST025VT </div>
<div class="box" id="job6518" style="background:blue;float:left;">ST026VT </div>
<div class="box" id="job6519" style="background:blue;float:left;">ST027VT </div>


<img src="https://www.olthofhomes.com/OlthofImages/All/000097_000107_009715_Sterling_Creek_783_SterlingCreekCommunityPlat_960_640.jpg">
<div id="results"></div>
</div>

CSS

.box {
    margin:5px;    width: 50px;    height: 12px;    background: yellow;  font-size:xx-small;    color:white;
}


#results {
    text-align: center;
}

JavaScript

var coordinates = function(element) {
    element = $(element);
    var top = element.position().top;
    var left = element.position().left;
    $('#results').text('X: ' + left + ' ' + 'Y: ' + top);
}


$('.box').draggable({
    start: function() {
        coordinates(this);
    },
    stop: function() {
        coordinates(this);
    }
});