title: Keep a draggable div inside its parent
body: <p>I have got a draggable div tag and I'd like it not to overflow from its parent while being dragged.</p>
  
  <pre><code>&lt;script&gt;
      $('.children').resizeable().draggable();//from jquerUI
  &lt;/script&gt;
  
  &lt;style&gt;
      .parent{
          overflow: hidden;
          position: relative;
          width: 1000px;
          height: 1000px;
      }
      .children{
          width: 100px;
          height: 100px;
          position: absolute;
      }
  &lt;/style&gt;
  
  &lt;div class="parent"&gt;
     &lt;div class="children"&gt;&lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I limit the children's position and size inside the parent.</p>