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>

  <div>

    <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;
}

JavaScript

var el = $("#community1");

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

$(".box").draggable({
  stop: function(event, ui) {
   
 
    var $newPosX = ui.offset.left - $(this).offset().left;
    var $newPosY = ui.offset.top - $(this).offset().top;

  }
});


$("img").on("click", function(event) {

  var x = event.pageX - this.offsetLeft;
  var y = event.pageY - this.offsetTop;
  console.log("X page: " + event.pageX + " Y page: " + event.pageY);
  console.log("this Coordinate: " + this.offsetLeft + " Y Coordinate: " + this.offsetTop);
  console.log("X Coordinate: " + x + " Y Coordinate: " + y);
});