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: 0px;
  width: 20px;
  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) {


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

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

        
        // debug current dropped position
        alert($(this).attr("id") + " top: " + topPosition + ", left: " + leftPosition); 
        

   },
   });
function printMousePos(event) {
  console.log(
    "clientX: " + event.clientX +
    " - clientY: " + event.clientY
    )
    ;
}

document.addEventListener("click", printMousePos);