如何獲取元素相對於父項的位置？

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>