jquery – Take position of element's top, left element according to parent element

Question:

I'm using jquery offset to get the position of an element and I'm using draggable to move this element. The offset element is inside a div and I would like to get its position by the parent element, and not by the whole document as it is in the code.

  <!DOCTYPE html>
<html>
    <head>
    <link   href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <style  type="text/css">
        #draggable { width: 100px; height: 70px; background: #000; position:relative; }
        #mostra {margin-top:200px;}
    </style>
    <script>
            $(document).ready(function() {
                $("#draggable").draggable({
                containment: '#limiteMove',
                cursor: 'move',
                snap: '#limiteMove'
            });
                $('#draggable').mouseup(function () {
                var p = $("#mostra");
                var offset = $("#draggable").offset();
                $("#mostra").html("left: " + offset.left + ", top: " + offset.top);
              });
            });
    </script>
    </head>
    <body style="font-size:62.5%;">
            <p id="mostra"></p>
            <div id="limiteMove" style="width:400px; height:300px; background:#CCC; color:#ccc; position:absolute;">
            <div id="draggable">Movame</div>
            </div>

    </body>
</html>

Grateful for the help!!! =D

Answer:

Solved =D

Take the left and top from the parent element and subtract from the child element.

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
    #draggable { width: 100px; height: 70px; background: #999; position:relative; }
	#mostra {margin-top:200px;}
  </style>
  <script>
  $(document).ready(function() {
    $("#draggable").draggable({
    containment: '#limiteMove',
    cursor: 'move',
    snap: '#limiteMove'
  });
	$('#draggable').mouseup(function () {
	var p = $( "#mostra" );
	var offset = $("#draggable").offset();
	var offsetlimiteMove = $("#limiteMove").offset();
	var totalLeft = offset.left-offsetlimiteMove.left;
	var totalTop = offset.top-offsetlimiteMove.top;
	$("#mostra").html( "left: " + totalLeft + ", top: " + totalTop );
	 });
  });
  </script>
</head>
<body style="font-size:62.5%;">
  <p id="mostra"></p>
	<div id="limiteMove" style="width:400px; height:300px; background:#000; color:#ccc;">
		<div id="draggable">Movame</div>
	</div>

</body>
</html>
Scroll to Top