Wie erhält man die Elementposition relativ zum übergeordneten Element?

Question

Wie kann ich ändern, so dass y auf Null gesetzt ist?

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

Ich habe "Position" auf "Offset" zu ändern, und ich habe versucht, die CSS-Position zu ändern. Aber ich kann nicht herausfinden, wie man y bekommt, um Top von seinem Elternteil zu zählen.

Answer 1

Nehmen Sie die x- und y-Position des Containers und ziehen Sie diese Werte von den entsprechenden Werten ab.

jsFiddle.

Alternativ geben Sie die position: absolute des ziehbaren Elements und die übergeordnete position: relative.

jsFiddle.

Answer 2

Sie können offset() für die Eltern verwenden und es von dem Kind wie folgt abziehen:

$('#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>