title: Move jquery resizable handles out of the divs
body: <p>I have 3 divs. One inside the other. </p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>    $(function() {
          $("#div1").resizable({
              handles: "n, e, s, w, nw, ne, sw,se"
          });
          $("#div1").draggable();
      });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="div1" style="left: 2px; top: 2px; z-index: 2; width: 100px; height: 70px; background-color: black"&gt;
      &lt;div id="div2" style="width: 100%; height: 100%; background-color: green; position: absolute;"&gt;
          &lt;div id="div3" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);"&gt;
              text
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.ui-resizable-handle { width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; }
  .ui-resizable-n { top: 1px; left: 50%; }
  .ui-resizable-e { right: 1px; top: 50%; }
  .ui-resizable-s { bottom: 1px; left: 50%; }
  .ui-resizable-w { left: 1px; top: 50%; }
  .ui-resizable-nw { left: 1px; top: 1px; }
  .ui-resizable-ne { top: 1px; right: 1px; }
  .ui-resizable-sw { bottom: 1px; left: 1px; }
  </code></pre>
  
  <p>As you can see the div1 is <strong>resizable</strong>,draggable and has absolute width and height. Div2 has 100% width and height and has absolute position. Div3 has the parameters to be centered horizontally and vertically.</p>
  
  <p>I have a <a href="http://img69.imageshack.us/img69/5188/handles.jpg" rel="nofollow">screenshot</a> of what i want to do. I want the white handles to be outside the div like shown in the screenshot. The second div must stay with position:absolute. There is also a <a href="http://jsfiddle.net/U3bnS/1/" rel="nofollow">jsfiddle</a> that contains my current code.</p>
  
  <p>Please help me move the handles outside of the div.</p>