javascript - 如何获取元素相对于父元素的位置？

Question

我该如何更改，以便将 y 设置为零？

fiddle
http://jsfiddle.net/DGbT3/2672/

HTML

<div id="parent" style="width: 300px; height: 300px; border: 1px solid black; margin-top: 50px;">
  <div id="dragThis">
    <ul>
      <li id="posX"></li>
      <li id="posY"></li>
    </ul>
  </div>
</div>

JS

$('#dragThis').draggable({
  drag: function() {
    var position = $(this).position();
    var xPos = position.left;
    var yPos = position.top;
    $('#posX').text('x: ' + xPos);
    $('#posY').text('y: ' + yPos);
  }
});

CSS

#dragThis {
  width: 6em;
  height: 6em;
  padding: 0.5em;
  border: 3px solid #ccc;
  border-radius: 0 1em 1em 1em;
  position: relative;
  top: 0px;
}

我一直在将“position”更改为“offset”，并且尝试更改 CSS 位置。但我无法弄清楚，如何获得 y，从其父项中算出 top。

Answer 1

获取其容器的 x 和 y 位置，并从适当的值中减去这些值。

jsFiddle .

或者，给可拖动元素的 position: absolute 和父 position: relative。

jsFiddle .