Check out this script I have:
HTML
<div id="left">
<div>Orange Div</div>
<div>
<div class="left_text">top</div>
<div class="left_text">left</div>
<textarea class="count2"> </textarea>
<textarea class="count1"> </textarea>
<div style="clear: both;"></div>
<button id="getText1">Move</button>
</div>
</div>
<div id="red_div">
<div id="green_div">
<div id="orange_div">
<h3>Orange Div</h3>
</div>
</div>
</div>
CSS
#left{
width: 150px;
height: 80px;
float:left;}
.left_text{
color: red;
height:20px;
width:50px;
float:left;}
textarea.count1, textarea.count2 {
color: red;
height:20px;
width:50px;
float:left;}
#red_div{
margin: auto;
width: 300px;
height: 450px;
float:left;
border: 1px solid ccc;
background-color: red;}
#green_div {
width: 300px;
height: 200px;
float: left;
display: block;
position: relative;
background-color: green;
border: 1px solid ccc;
margin-top: 100px;}
#orange_div {
width: 100px;
height: 100px;
float: left;
font-size: 16px;
font-family: Arial;
background-color: orange;}
JQUERY
$( "#orange_div" ).resizable().draggable({
containment: "#green_div",
scroll: false,
drag: function(event) {
o = $(this).offset();
p = $(this).position();
$('.count1').html(p.left);
$('.count2').html(p.top);
}
});
function updateCoordinate(newCoordinate) {
$(".count1").text(newCoordinate);
$(".count2").text(newCoordinate);
}
$("#getText1").click(function () {
$("#orange_div").offset({
top: $('.count2').text(),
left: $('.count1').text()
});
});
The demo is here:
http://jsfiddle.net/emilsifu/zPHhp/4/
I'm trying to position the orange div inside the green div when values are entered in the textarea on the left. The orange div should be draggable.
Currently, it seems to be positioned from the top left corner instead of where intended.
Your assistance is greatly appreciated!