title: Drag & Resize div overlapped other div
body: <p>I m a new comer for stack overflow. I need your help.
  I got jquery  resize widget from online and tried to implement my source. It works fine only one widget. If i put the same resize function to multi widget in the same page, it gets overlapped while a widget resize. And one more information when i resize last widget, its not affected (overlapped) to others.</p>
  
  <p>My code
  CSS</p>
  
  <pre><code>&lt;style&gt;
  .widget1
  {
      width:150px; min-height:120px; border:1px solid green;
  }
  .widget2
  {
      width:150px; min-height:120px; border:1px solid blue;
  }
  .widget3
  {
      width:150px; min-height:120px; border:1px solid black;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Js Used</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(function() {
          $(".drag_resize").draggable().resizable();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>&lt;div class="widget1 drag_resize"&gt;
   Dummy contents 1
  &lt;/div&gt;
  &lt;div class="widget2 drag_resize"&gt;
   Dummy contents 2
  &lt;/div&gt;
  &lt;div class="widget3 drag_resize"&gt;
   Dummy contents 3
  &lt;/div&gt;
  </code></pre>