jquery show position of multiple elements after drag

Question

I'm trying to get the positions of multiple draggable elements using jQuery UI. I found a similar question (X and Y Positions of multiple jQuery UI Elements) but in my case there's one div holding multiple, draggable divs so the answer don`t work for me.

$('#snaptarget').each(function() {
  var elems = $(this).find('div');
  elems.draggable({
    containment: '#snaptarget',
    scroll: false,
    grid: [5, 5],
    drag: function() {
      var links = Math.round(elems.position().left) / 20;
      var oben = Math.round(elems.position().top) / 20;
      $(this).find('span').html('Links: ' + links + 'mm<br>Oben: ' + oben + 'mm');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="snaptarget" style="background: green;height: 1720px; width: 1720px; position: absolute;margin: 20mm;">
  <div id="ci1" style="z-index: 999; position: absolute; overflow: hidden; width: 140px; height: 140px; background-color:white;border: 1px solid red;">
    <p>id: ci1<br>
      <span id="p_ci1"></span>
    </p>
  </div>
  <div id="ci2" style="z-index: 999; position: absolute; left: 160px; overflow: hidden; width: 140px; height: 140px; background-color:white;border: 1px solid red;">
    <p>id: ci2<br>
      <span id="p_ci2"></span>
    </p>
  </div>
</div>

My code works only for the first draggable element. But the second draggable element get the position of the first element.

Please can someone tell me how to get the position per element in my case?

Thank you

Answer 1

The issue is because in your code $(this) refers to the #snaptarget, not the div of you're instantiating draggable() on. Also elems is a collection of elements, so reading the position() from it will only retrieve the values from the first element.

To fix this change your selector to $('#snaptarget div'):

$('#snaptarget div').each(function() {
  var $elem = $(this);
  $elem.draggable({
    containment: '#snaptarget',
    scroll: false,
    grid: [5, 5],
    drag: function() {
      var links = Math.round($elem.position().left) / 20;
      var oben = Math.round($elem.position().top) / 20;
      $elem.find('span').html('Links: ' + links + 'mm<br>Oben: ' + oben + 'mm');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="snaptarget" style="background: green;height: 1720px; width: 1720px; position: absolute;margin: 20mm;">
  <div id="ci1" style="z-index: 999; position: absolute; overflow: hidden; width: 140px; height: 140px; background-color:white;border: 1px solid red;">
    <p>id: ci1<br>
      <span id="p_ci1"></span>
    </p>
  </div>
  <div id="ci2" style="z-index: 999; position: absolute; left: 160px; overflow: hidden; width: 140px; height: 140px; background-color:white;border: 1px solid red;">
    <p>id: ci2<br>
      <span id="p_ci2"></span>
    </p>
  </div>
</div>