jQuery: getting the coordinates of a draggable object

by jimkennelly

HTML

<div id="container" style="position: relative;">
<table><tr><td>


<div class="box" id="ST003VT" style="background:blue;float:left;">ST003VT</div>
<div class="box" id="ST004VT" style="background:blue;float:left;">ST004VT</div>
<div class="box" id="ST010VT" style="background:blue;float:left;">ST010VT</div>
<div class="box" id="ST011VT" style="background:red;float:left;">ST011VT</div>
<div class="box" id="ST012VT" style="background:blue;float:left;">ST012VT</div>
<div class="box" id="ST013VT" style="background:blue;float:left;">ST013VT</div>
<div class="box" id="ST014VT" style="background:blue;float:left;">ST014VT</div>
<div class="box" id="ST015VT" style="background:blue;float:left;">ST015VT</div>
<div class="box" id="ST016VT" style="background:blue;float:left;">ST016VT</div>
<div class="box" id="ST017VT" style="background:blue;float:left;">ST017VT</div>
<div class="box" id="ST025VT" style="background:blue;float:left;">ST025VT</div>
<div class="box" id="ST026VT" style="background:blue;float:left;">ST026VT</div>
<div class="box" id="ST027VT" style="background:blue;float:left;">ST027VT</div>
</td></tr></table>

  <div style="float:clear;" id="div1">

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

  </div>
  <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;
}
img{ float:left}

JavaScript

var el = document.getElementById("div1");

 var communityRect = el.getBoundingClientRect();
 console.log(communityRect.top, communityRect.right, communityRect.bottom, communityRect.left);

 $(".box").draggable({
   stop: function(event, ui) {

 alert($(this).attr('id') +' has been located'); 
 
 
     var $newPosX = ui.offset.left - $(this).offset().left;
     var $newPosY = ui.offset.top - $(this).offset().top;
     

   }
 });