Pick position of element top, left of element according to parent element

Question

Pick position of element top, left of element according to parent element

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'm using offset from jquery 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 the position of the element by the parent element, not the entire 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" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><scriptsrc="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

html jquery css

asked by anonymous 08.10.2016 / 17:49

2 answers

Python - MP3 Libraries TabPanel does not work with angular

score 1 · Answer 1

Solved = D

I took the left and top of the parent element and subtract it 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><scriptsrc="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>

score 0 · Answer 2

One tip, this:

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

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