title: How to make block draggable within a certain block only?
body: <p>I have a small problem. I pasted my code <a href="http://codepen.io/anon/pen/pJyvVE" rel="nofollow">here</a>.</p>
  
  <p>My problem is this: I want to make my <code>window</code> <code>div</code> (<code>&lt;div id="window"&gt; Drag me &lt;/div&gt;</code>) draggable only within <code>warp</code> div.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div id="warp"&gt;
      &lt;div id="window"&gt;
          Drag me
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>body {
      margin: 0;
      background-color: #e67e22;
  }
  
  #window {
      width: 150px;
      height: 200px;
      //background-color: #1abc9c;
      border: 2px solid #16a085;
      padding: 20px;
  }
  
  #warp {
      margin: 10px;
      width: 700px;
      height: 600px;
      border: 2px solid #e74c3c;
  }
  </code></pre>
  
  <p>JS code:</p>
  
  <pre><code>$(document).ready(function() {
      $("#window").draggable();
  });
  </code></pre>
  
  <p>I mean when I drag it with mouse then it shouldn't go out of <code>warp</code> div.</p>