title: jquery draggable stops working after setting divs to "position: static"
body: <p>I currently have a simple setup of div-boxes that I can move through the jquery draggable functionalities. I now encountered a problem I just can't figure out. 
  The dragging works perfectly fine if I initially load the page with the following setup:</p>
  
  <pre><code>html:
  &lt;div id="box_1" class="card ui-widget-content"&gt;&lt;p&gt;Peter&lt;/p&gt;&lt;/div&gt;
  &lt;div id="box_2" class="card ui-widget-content"&gt;&lt;p&gt;Susan&lt;/p&gt;&lt;/div&gt;
  ...
  
  css:
  .card {
      width: 200px;
      height: 280px;
      border: 1px solid blue;
      padding: 10px;
      margin: 15px;
      box-sizing: border-box;
      float: left;
      position: static;
  }
  
  js:
  &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  
  $(document).ready(function(){
  
      $( ".card" ).draggable();
  
      }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>Now I wanted to add a button that "resets" the divs to the original grid:</p>
  
  <pre><code>    $( "#grid" ).click(function() 
      {
          $('.card').css({position: 'static'});
  
      });
  </code></pre>
  
  <p>I thought it would be easiest to just use "position: 'static'", as this already works when opening the page. Now the problem here is, that while the divs readjust to a grid the way I want them to, the draggable functionality is gone. </p>
  
  <p>I already tried to 'disable' and 'enable' draggable on the divs but it does not do the trick.</p>
  
  <p>I am kind of confused why the functionality just stops.</p>
  
  <p>Thank you very much for your help :D</p>