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

Question

我如何更改，以使y设置为零？

小提琴
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;
}

我一直在将“位置”更改为“偏移”，并且尝试更改CSS位置。 但我不知道如何获得y，以从其父代算起最高。

Answer 1

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

jsFiddle 。

或者，指定可拖动元素的position: absolute ，父position: relative 。

jsFiddle 。

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>