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<span class="tooltiptext">3690 Sage Court, Portage</span> </div>
<div class="box" id="ST004VT" style="background:blue;float:left;">ST004VT<span class="tooltiptext">3688 Sage Court, Portage</span> </div>
<div class="box" id="ST010VT" style="background:blue;float:left;">ST010VT<span class="tooltiptext">3689 Sage Court, Portage</span> </div>
<div class="box" id="ST011VT" style="background:red;float:left;">ST011VT<span class="tooltiptext">3693 Sage Court, Portage</span> </div>
<div class="box" id="ST012VT" style="background:blue;float:left;">ST012VT<span class="tooltiptext">3697 Sage Court, Portage</span> </div>
<div class="box" id="ST013VT" style="background:blue;float:left;">ST013VT<span class="tooltiptext">3700 Fountain Court, Portage</span> </div>
<div class="box" id="ST014VT" style="background:blue;float:left;">ST014VT<span class="tooltiptext">3698 Fountain Court, Portage</span> </div>
<div class="box" id="ST015VT" style="background:blue;float:left;">ST015VT<span class="tooltiptext">3696 Fountain Court, Portage</span> </div>
<div class="box" id="ST016VT" style="background:blue;float:left;">ST016VT<span class="tooltiptext">3692 Fountain Court, Portage</span> </div>
<div class="box" id="ST017VT" style="background:blue;float:left;">ST017VT<span class="tooltiptext">3690 Fountain Court, Portage</span> </div>
<div class="box" id="ST025VT" style="background:blue;float:left;">ST025VT<span class="tooltiptext">3693 Fountain Court, Portage</span> </div>
<div class="box" id="ST026VT" style="background:blue;float:left;">ST026VT<span class="tooltiptext">3695 Fountain Court, Portage</span> </div>
<div class="box" id="ST027VT" style="background:blue;float:left;">ST027VT<span class="tooltiptext">3701 Fountain Court, Portage</span> </div>

</td></tr></table>

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

    <img  id="community1"...

CSS

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

#results {
  text-align: center;
}
img{ float:left}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

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;
     

   }
 });