jQuery: getting the coordinates of a draggable object

by jimkennelly

HTML

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

        <div class="tooltip">
          <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"...

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) {

     dragEl = ui.helper.clone();
     ui.helper.remove();

     leftPosition = ui.offset.left - $(this).offset().left;
     topPosition = ui.offset.top - $(this).offset().top;

     console.log(leftPosition, topPosition);

   }
 });