How Can I Drag And Drop Menu And Its Corresponding Submenu At A Time.

See more:

Javascript

PHP

sorting

menu

, +

Iwant to drag and drop both menu and sumenu at a time ,now for the time it is working for parent menu darg and drop.I want that corresponding submenu should drag and drop.After page refreshing everything comes fine .I have tried a lot,but not getting any solution for it,below is my coding.plz help me.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
    var jq = $.noConflict();
    jq(function() {
        var strURL = '<?php echo HTTP_ROOT; ?>';
        jq("#list").sortable({class: 'move', update: function() {
                var order = jq('#list').sortable('serialize');
              alert(order);
                $.post(strURL + "menus/reorder", order, function(theResponse) {

                });

            }

        });

    });

</script> 

ctp page

<table class="table">
    <thead>
        <tr>
            <th width="5%">Sl No</th>

            <th>Menu</th>
            <th>Assign Page</th>
            <th style="text-align:center;">Action</th>
        </tr>
    </thead>
    <tbody id='list'>
        <tr></tr>//parent menu
        <tr></tr> //submenu
        <tr></tr> //submenu of submenu

    </tbody>
</table>