After dragging and dropping, I get the wrong coordinates of all the elements, but the first

Question

There are some div elements on my page. The user can drag any of them many times. After each drag, I need to get the new div coordinates that were dragged.

My code works well with div [0]: I really get new coordinates after every new drag and drop. The problem is that all other divs, such as div [1], div [2], div [10] ... Script get the coordinates after the first drag, but all the coordinates of the next time are still the same. They do not change.

I tried to clear the variables, but that didn't help.

What could be this problem? What should I check to find a solution?

I am using jQuery and jQuery UI. The code:

$(document).ready(function(){ 
$(".rD").draggable({
stop: function(event, ui) { 
// get the index of the dragged element 
id = $(this).index();
// get coordinates of the dragged element
rect = document.getElementsByTagName("div")[id].getBoundingClientRect();
alert("top:" + rect.top + ", left: " + rect.left);
// clearing variables didn't help to solve the problem
delete rect;
delete id;
}
});

Answer 1

:

alert(ui.position.top, ui.position.left)

:

$(document).ready(function(){ 
  $(".rD").draggable({
    stop: function(event, ui) { 
      // Use var keyword for your local variables
      // var rect = ui.helper[0].getBoundingClientRect();
      alert("top:" + ui.position.top + ", left: " + ui.position.left);
    }
  });
});