jQuery ui sortable, 2 sortable tables, disable one when other is being used

I have a table that's sortable. Within each row is a link that dynamically loads another sortable table (it expands the row). The problem I have is that if you don't click in the right specific area, you can still sort the entire dynamically sorted table because it's still within in the sortable row of the parent table. What I want to do is disable sortable on the parent table when the new table is loaded.

So this:

<table class="sortable">
   <tr><td><a class="load" href="#">load content</a></td></tr>
   <tr><td><a class="load" href="#">load content</a></td></tr>
</table>

turns into this:

<table class="so开发者_JAVA技巧rtable">
  <tr><td>
    <table class="sortable_subtable">
       <tr><td>loaded content row 1</td><tr>
       <tr><td>loaded content row 2</td><tr>
    </table>        
  </td></tr>
  <tr><td><a class="load" href="#">load content</a></td></tr>
</table>   

I've tried using $('.sortable').sortable('disable'); on the click event that loads the sortable_subtable, but it just ends up disabling the whole sortable ui.

Note: I do not want to hide anything

basically I want this:

$('.sortable, .sortable_subtable').sortable();

$('.load').click(function(e){
     //disable sortable on '.sortable' only 
     //loads dynamic content into table row, expanding row
    });

---

I tested this with list instead of tables and it seems to work. Check the working jfiddle example.

It looks like this

<ul class="sortable">
<li><a class="load" href="#">load content 1</a></li>
<li>
<ul class="sortable_subtable">
  <li><a class="load" href="#">loaded content row 1</a>
  <li><a class="load" href="#">loaded content row 2</a></li>
</ul>    
</li>
<li><a class="load" href="#">load content 3</a></li>
</ul>   

And the script:

$('.sortable, .sortable_subtable').sortable();
$('.sortable').sortable('disable');

After the second line disables the main list, you can sort just the subtable list

UPDATE Found a post on how to use tables with sortable.
Basically put the rows inside <tbody class=content>
then use

$("#tableId tbody.content").sortable();