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

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从其父元素计算顶部。

- Björn C

Answer 1

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

或者，将可拖动元素的position: absolute和父元素的position: relative设定。 jsFiddle。

- alex

---

谢谢。我不想使用数学来获取位置。但将父元素更改为相对定位正是我要找的！ - Björn C

@Mjukis 不要害怕一些数学 :D - alex

很复杂，因为我的真实项目有嵌套的div，所以数学会非常复杂... :D - Björn C

Answer 2

你可以使用offset()来代表父元素，并像这样从子元素中减去它：

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<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>

- Starfish

---

你需要考虑x的值，否则在具有填充的示例代码中，当x的值为7时，它将紧贴边缘。 - alex

为示例添加了x ;) - Starfish