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

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; 
} 

我已经改变“位置”，以“抵消”我试图更改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>