jQuery limit sortable to parent table row

Question

So I have a table which has several categories, with several items underneath in each category.

Something like:

 <tr>  
 <td>Category1</td>  
 </tr>  
 <tr>  
   <td>Item1<td>  
 </tr>  
 <tr>  
   <td>Item2</td>  
 </tr>  
 <tr>  
   <td>Item3</td>  
 </tr>  
 <tr>  
   <td>Category2</td>  
 </tr>  
 <tr>  
   <td>item1</td>  
 </tr>

I want to be able to sort each "item" within its category only. So "item1" inside "category2" should not be able to be dragged to "category1". Not really sure how to accomplish this.

Answer 1

You can implement jQuery UI's sortable interaction to achieve your requirement. Following is an working example:

<style type="text/css">
    .isSortable { list-style-type: none; margin: 10px; padding: 5px; width: 60%; }
    .isSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
    html>body .isSortable li { height: 1.5em; line-height: 1.2em; }

</style>

<ul id="category1" class="isSortable" style="border:1px solid blue;">
    <li class="ui-state-default">item1</li>
    <li class="ui-state-default">item2</li>
    <li class="ui-state-default">item3</li>
</ul>

<ul id="category2" class="isSortable" style="border:1px solid red;">
    <li class="ui-state-default">item1</li>
    <li class="ui-state-default">item2</li>
    <li class="ui-state-default">item3</li>
</ul>

<script type="text/javascript">

    $('ul.isSortable').each(function(){
        $(this).sortable({
            connectWith : $(this).attr('id')
        })
    });

</script>

EDIT:

Following code should implement your requirement:

<style type="text/css">
    .isSortable { list-style-type: none; margin: 10px; padding: 5px; width: 60%; }
    .isSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
    html>body .isSortable li { height: 1.5em; line-height: 1.2em; }

</style>

<ul class="isSortableBlock">   
    <li>
        <span>Category</span>
        <ul id="category1" class="isSortable" style="border:1px solid blue;">
        <li class="ui-state-default">item1</li>
        <li class="ui-state-default">item2</li>
        <li class="ui-state-default">item3</li>
        </ul>
    </li>
    <li>
        <span>Category 2</span>
        <ul id="category2" class="isSortable" style="border:1px solid blue;">
        <li class="ui-state-default">item1</li>
        <li class="ui-state-default">item2</li>
        <li class="ui-state-default">item3</li>
        </ul>
    </li>
</ul>

<script type="text/javascript">

    $('ul.isSortableBlock').sortable();

    $('ul.isSortable').each(function(){
    $(this).sortable({
    connectWith : $(this).attr('id')
    })
    });

</script>

I'd also updated the same in the link http://jsfiddle.net/sKnLR/8/ ​