how to move one div with another in javascript
<p>I am trying to make a web app with two boxes, one contained in the other. The user should be able to click and move the inner box, however, the user should not be able to move this box outside the confines of the outer box. The user can move the outer box by dragging the inner box against one of the edges of the outer box. I know how to move the inner box, but the problem is how to move the other box with this restriction. Can anybody help me please? Here is what I did so far:</p>

<pre><code>    &lt;!doctype html&gt;
&lt;head&gt;
&lt;title&gt;JavaScript Game&lt;/title&gt;
&lt;style&gt;
#container {
height:400px;
width:600px;
outline: 1px solid black;
position:absolute;
left:50px;
top: 0px;
background-color:green;
}
#guy {
position:absolute;
height:50px;
width:50px;
outline: 1px solid black;
background-color:red;
left: 200px;
top: 200px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="container"&gt;&lt;/div&gt;
&lt;div id="guy"&gt;&lt;/div&gt;
&lt;script&gt;
var guy=document.getElementById("guy");
var cont=document.getElementById("container");
var lastX,lastY; // Tracks the last observed mouse X and Y position


guy.addEventListener("mousedown", function(event) {
    if (event.which == 1) {
      lastX = event.pageX;
      lastY = event.pageY;
      addEventListener("mousemove", moved);
      event.preventDefault(); // Prevent selection
    }
  });

function buttonPressed(event) {
    if (event.buttons == null)
      return event.which != 0;
    else
      return event.buttons != 0;
  }
  function moved(event) {
    if (!buttonPressed(event)) {
      removeEventListener("mousemove", moved);
    } else {
      var distX = event.pageX - lastX;
      var distY = event.pageY - lastY;    
      guy.style.left =guy.offsetLeft + distX  + "px";
      guy.style.top = guy.offsetTop + distY  + "px";
      lastX = event.pageX;
      lastY = event.pageY;
    }
  }

&lt;/script&gt;
&lt;/body&gt;
</code></pre>