jQuery sortable not working on div

Question

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!

JS code:

<script>
    $(function() {
    $( ".menu" ).sortable({
    items:'.menuSort'
        });
    });
</script>

Body code:

 <div class="menu">
    <?php
    foreach($data as $head){
    ?>
    <div id="header_<?php echo $head->id ?>" class="menuSort">
        <h2 class="menuHeadTitle">
            <?php 
            echo $head->name;
            ?>
        </h2>
        <p class = "menuHeadDescription">
            <?php 
            echo $head->description;
        ?>
        </p>
        <br/>
        <div class="menuHeadItems">
            <?php
            foreach($head->items as $item){
            ?>
                <div class="menuItem";
                    <p class="itemName">
                        <?php 
                        echo $item->name;
                        ?>
                    </p>
                    <p class="itemPrice">
                        <?php 
                        echo $item->price;
                        ?>
                    </p>
                    <p class="itemDescription">
                        <?php 
                        echo $item->description;
                        ?>
                    </p>
                    <br/>
                </div>
            <?php 
            }
            ?>
        </div>
    </div>
    <?php 
    }
    ?>  
</div>

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).

Have tried both jQuery 1.11 and 1.10 to no avail.

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.

EDIT 2: Fiddle is here: http://jsfiddle.net/SBN84/

Answer 1

Building on your fiddle, Here is an updated fiddle. You basically needed to select a jquery version, jquery ui. Note that > is not mandatory.

$(function () {
    $(".menu").sortable({
        items: '> .menuSort'
    });
});