title: Drag and Drop Jquery drop the object to box
body: <p>I'm doing a simple drag and drop application. But what I want to accomplish is drag the object (100px by 100px) to box (500px by 500px), while I drop it inside box, when I drag it once again, it should not go beyond the box, but it is only draggable in any area of the box. </p>
  
  <p>This is what I've tried so far:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;style&gt;
  #makeMeDraggable { width: 100px; height: 100px; background: green; }
  #makeMeDroppable { float: left; margin: 50px; width: 500px; height: 300px; border: 1px     solid #999; }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  $( init );
  function init() {
  $('#makeMeDraggable').draggable();
  $('#makeMeDroppable').droppable( {
  drop: handleDropEvent
  } );
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;div id="content" style="height: 400px;"&gt;
  
     &lt;div id="makeMeDraggable"&gt; &lt;/div&gt;
     &lt;div id="makeMeDroppable"&gt; &lt;/div&gt;
  
   &lt;/div&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But it's not doing what I want. Any help is truly appreciated. </p>