Question

I have the following html code with Jquery Sorting

<div class="sortable" style='width:700px; margin: 0 auto; border:2px solid; border-color:grey;'>
    <a href='#' class='expand'> Group 1</a>
<ul style="display:none" class="sortable" >
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
</ul>

<a href='#' class='expand'> Group 2</a>
<ul style="display:none" class="sortable">
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    <li class="ui-state-default">Item 6</li>
</ul>
</div> 

JQuery……

<script>
    $(function() {
        $( ".sortable" ).sortable();
        $( ".sortable" ).disableSelection();
    });
</script>
<script>
$(document).ready(function() {
    $('.expand').click(function() {
        $(this).next().toggle('slow', function() {
        });
    });
});

</script>

The list inside ul is sortable and the uls inside the div on the whole aer also sortable. The problem is when I move one item from one group to another and if I place that item in between the items of that group it is added inside ul but if i place it at the bottom of the group or just below the group then it is placed outside the ul.

Edit

Now I can sort the lists inside each ul but I cannot sort the whole ul and cannot move an item from one group to another

Can any one help me?
Thanks

On JSFiddle

Answer 1

Your script is going crazy because you have a bunch of items with the same id sortable – Only use one id per element, multiple elements can share the same class. Example…

<script type="text/javascript">
    $(function() {
        $(".patents").sortable();
        $(".patents").disableSelection();
    });
</script>

<div id="sortWrap">

    <a href="#" class="expand">Group 1</a>
    <ul style="display: none;" id="ulOne" class="patents">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
    </ul>

    <a href="#" class="expand">Group 2</a>
    <ul style="display: none;" id="ulTwo" class="patents">
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
        <li class="ui-state-default">Item 6</li>
    </ul>

</div>

Beside your syntax errors, what you are trying to do isn’t easily done with Sortable alone; you’ll want this extension to be able to rearrange nested lists: https://github.com/mjsarfatti/nestedSortable