title: Resizable handles with jQueryUI
body: <p>I need to make resizable handles like in this image. </p>
  
  <p><img src="https://i.stack.imgur.com/UckLR.jpg" alt="green box with resizing handles"></p>
  
  <p>To be more specific, I need those blue dots to be around my <code>&lt;div&gt;</code> to allow resizing from different sides.</p>
  
  <p>Currently I'm using the following code: </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="jquery-ui-1.10.2/themes/base/jquery-ui.css" /&gt;
          &lt;script src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="jquery-ui-1.10.2/ui/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;title&gt;border&lt;/title&gt;
          &lt;script type="text/javascript"&gt;
              $(function() {
              $('#elementResizable').resizable({ 
                  handles: {
                      'ne': '#negrip',
                      'se': '#segrip',
                      'sw': '#swgrip',
                      'nw': '#nwgrip'
                  }
              });
          });
          &lt;/script&gt;
          &lt;style&gt;
              #elementResizable {
                  border: 1px solid #000000;
                  width: 300px;
                  height: 40px;
                  overflow: hidden;
              }
              #nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
                  width: 10px;
                  height: 10px;
                  background-color: #ffffff;
                  border: 1px solid #000000;
              }
              #segrip {
                  right: -5px;
                  bottom: -5px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id='elementResizable'&gt;
              &lt;h1&gt;Full Name&lt;/h1&gt;
              Title
              &lt;div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"&gt;&lt;/div&gt;
              &lt;div class="ui-resizable-handle ui-resizable-ne" id="negrip"&gt;&lt;/div&gt;
              &lt;div class="ui-resizable-handle ui-resizable-sw" id="swgrip"&gt;&lt;/div&gt;
              &lt;div class="ui-resizable-handle ui-resizable-se" id="segrip"&gt;&lt;/div&gt; 
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As a result i got something like this. </p>
  
  <p><img src="https://i.stack.imgur.com/Qs0BD.jpg" alt="box with handles in corners"></p>
  
  <p>The result is OK, but I need to make the handles not only in corners, but also in the middle of the border, exactly like in the first image.</p>