getBoundingClientRect（）;坐标都是一样的

Question

我正在使用JQuery draggable并尝试获取getBoundingClientRect（）;中元素的坐标。一切看起来都不错，但控制台为每个id返回相同的坐标。

这是我的小提琴

https://jsfiddle.net/progrower/orxLpfku/

这是js

 $(function() { 
 document.getElementById('save-elements').onclick = function() {

       var element_ids = [];
       var element_top = [];
       var element_left = [];

        $(".makeMeDraggable").each(function() {

        var myposition = $(this).position();
            element_ids = $(this).attr('id');
            element_top = myposition.top;
            element_left = myposition.left;


             console.log(element_ids);
             console.log(element_top);
             console.log(element_left);
         });           

    };
});

这是html

  <section class="columns clear">
      <div class="wideBox">
         <h1>Application Record Book</h1>
           <button id="save-elements">Save locations</button>
      </div>
 <img id="trashcan" src="images/trashcan.png" alt="Trash" />
 <div id="wrapper" style="min-height: 500px; border: 1px solid black;">
    <div class="makeMeDraggable" id="number1"> </div>
     <div class="makeMeDraggable" id="number2"> </div>
       <div class="makeMeDraggable" id="number3"> </div>
        <div class="makeMeDraggable" id="number4"> </div>
 </div>
        </section>