title: jQuery sortable not working on div
body: <p>Trying to use jQuery's sortable.js on a series of divs coming from a database, but nothing happens when trying to drag-and-drop! </p>
  
  <p>JS code:
      
      </p>
  
  <pre><code>&lt;script&gt;
      $(function() {
      $( ".menu" ).sortable({
      items:'.menuSort'
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Body code: </p>
  
  <pre><code> &lt;div class="menu"&gt;
      &lt;?php
      foreach($data as $head){
      ?&gt;
      &lt;div id="header_&lt;?php echo $head-&gt;id ?&gt;" class="menuSort"&gt;
          &lt;h2 class="menuHeadTitle"&gt;
              &lt;?php 
              echo $head-&gt;name;
              ?&gt;
          &lt;/h2&gt;
          &lt;p class = "menuHeadDescription"&gt;
              &lt;?php 
              echo $head-&gt;description;
          ?&gt;
          &lt;/p&gt;
          &lt;br/&gt;
          &lt;div class="menuHeadItems"&gt;
              &lt;?php
              foreach($head-&gt;items as $item){
              ?&gt;
                  &lt;div class="menuItem";
                      &lt;p class="itemName"&gt;
                          &lt;?php 
                          echo $item-&gt;name;
                          ?&gt;
                      &lt;/p&gt;
                      &lt;p class="itemPrice"&gt;
                          &lt;?php 
                          echo $item-&gt;price;
                          ?&gt;
                      &lt;/p&gt;
                      &lt;p class="itemDescription"&gt;
                          &lt;?php 
                          echo $item-&gt;description;
                          ?&gt;
                      &lt;/p&gt;
                      &lt;br/&gt;
                  &lt;/div&gt;
              &lt;?php 
              }
              ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;?php 
      }
      ?&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>The page is for a restaurant menu: there should be a div for each header (Starter, Main, etc.), with a nested div for each dish under each header. I'm trying (for now) to get the headers sortable, and hope to have the dishes sortable too, but nothing's happening when clicking and dragging on any of the header divs (well, I'm selecting text - but that's not really what I want). </p>
  
  <p>Have tried both jQuery 1.11 and 1.10 to no avail. </p>
  
  <p>EDIT: think it might be something to do with z-axes but I have tried to push the header div to 10000 on the z-xis and still no results. </p>
  
  <p>EDIT 2: Fiddle is here: <a href="http://jsfiddle.net/SBN84/" rel="nofollow">http://jsfiddle.net/SBN84/</a></p>