Pick top, left element position according to parent element

Asked

Viewed 4,674 times

3

I’m using jquery offset to pick 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 take its position by the parent element, and not by the whole document like this in the code.

  <!DOCTYPE html>
<html>
    <head>
    <link   href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" 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>

Thanks for the help!!! = D

jquery html css

2 answers

2

Solved =D

I took the left and top of 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" rel="stylesheet" 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>

0

A hint, that:

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

is the same as that:

$('#draggable').mouseup(function () {
    $("#mostra").html( "left: " + $(this).offset().left + ", top: " + $(this).offset().top );
});

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.