It's possible to do this with a few tweaks in the JavaScript part too and not just the HTML.
Anyway, to start off, first remove the "id" attribute of the sortable table. Thus the outer table will no longer have an id of "sortable_adoptables".
Then, add a class to the "td" of the outer table and make it equal to "sortable_adoptables". After that, take out the "id" attribute of the inner table "tr" elements and assign it to the inner table instead.
You're done with the HTML part. As for the JavaScript side, it might be a little bit too complex to explain, so here's the ready-to-launch JavaScript and PHP + HTML code.
HTML Code:
<script type="text/javascript">
$(document).ready(function(){
$('body').undelegate('click').delegate('p#activate_sort', 'click', function(){
var realBg = $('table#sortable_adoptables').css('background-color');
var submitForm = '<form name="submit_order" id="submit_order" action="" method="post"><fieldset><label for="submit">Submit Changes</label><input type="submit" id="submit" value="Submit"></fieldset></form>';
$('.sortable_adoptables').css('background-color', '#FFFF66').animate({ backgroundColor: realBg }, 'slow' ).sortable({ cursor: 'pointer', connectWith: ".sortable_adoptables" });
$(submitForm).insertAfter('p#activate_sort').hide().slideDown();
$('p#activate_sort').attr('id', 'deactivate_sort');
});
$('body').undelegate('submit').delegate('form#submit_order', 'submit', function(event){
event.preventDefault();
var data = $.map($('.sortable_adoptables'), function(v, i){
return $(v).sortable('serialize');
});
data = data.join("&");
$.post('ajax_sort.php', data, function(result){
$('form#submit_order').html(result).delay(5000).fadeOut('slow', function(){
$(this).remove();
});
});
$('.sortable_adoptables').sortable('destroy');
$('p#deactivate_sort').attr('id', 'activate_sort');
});
});
</script>
PHP Code:
$article_content = "<p id='activate_sort' style='cursor: pointer'>
<img src='templates/icons/movepkmbtn.png' />
</p>
<table>
<tr>
<strong>Your Pokemon</strong></br></br>
</tr>
</table>
<table>";
$query = " SELECT *
FROM {$prefix}owned_adoptables
LEFT JOIN {$prefix}sort_adoptables
ON {$prefix}owned_adoptables.aid = {$prefix}sort_adoptables.adoptable_id
INNER JOIN {$prefix}levels
ON {$prefix}levels.thisislevel = {$prefix}owned_adoptables.currentlevel
INNER JOIN {$prefix}adoptables
ON {$prefix}owned_adoptables.type = {$prefix}adoptables.type
WHERE {$prefix}owned_adoptables.owner = '{$loggedinname}'
AND {$prefix}levels.adoptiename = {$prefix}adoptables.type
ORDER BY {$prefix}sort_adoptables.sorting_id";
$result = runquery($query);
$cols = 3;
do{
$article_content .= "<tr>";
for($i=1;$i<=$cols;$i++){ // All the rows will have $cols columns even if the records are less than $cols
$row = mysql_fetch_array($result);
if($row)
{
if($row['usealternates'] =='yes')
{
$image = $row['alternateimage'];
}
else
{
$image = $row['primaryimage'];
}
if($row['currentlevel'] == 0)
{
$image = $row['eggimage'];
}
if($image=='')
{
$image = $row['primaryimage'];
}
$article_content .= "
<td class='sortable_adoptables'>
<table id='orderaid_{$row['aid']}'><tr>
<td><a href='myadopts.php?act=manage&id={$row['aid']}'><img src='{$image}'></a></td>
<td><strong>{$row['name']}</strong> the {$row['type']} Pokemon</br>
Gender:<img src='picuploads/{$row['gender']}.png'></br>
Nature:{$row['temperment']}</br>
OT:{$row['ot']}</br>
EXP:{$row['totalclicks']}</br></td>
<td width=50%> </td> <!-- Create gap between columns -->
</tr></table></td>";
}
else{
$article_content .= "<td> </td>"; //If there are no more records at the end, add a blank column
}
}
} while($row);
$article_content .= "</table>";
}
Lemme know how this works out for you.