Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">

<div id="mySortable">
    <div class="thisIsAContainment_one">
        <table><tbody><tr><td>Table 1 (block 1)</td></tr></tbody></table>
        <table><tbody><tr><td>Table 2 (block 1)</td></tr></tbody></table>
        <table><tbody><tr><td>Table 3 (block 1)</td></tr></tbody></table>
    </div>

    <div class="thisIsAContainment_two">
        <table><tbody><tr><td>Table 1 (block 2)</td></tr></tbody></table>
        <table><tbody><tr><td>Table 2 (block 2)</td></tr></tbody></table>
        <table><tbody><tr><td>Table 3 (block 2)</td></tr></tbody></table>
    </div>
</div>

CSS

table {border:1px #d3d3d3 solid; margin:4px; cursor:move; height:30px;}
        td {white-space:nowrap;}

JavaScript

function forceHelper(e,ui) {
            $('.ui-state-highlight').html('<tbody><tr><td colspan="100%">&nbsp;</td></tr></tbody>');
        }

        $(document).ready(function() {
            $('#mySortable').sortable({
                items: 'table',
                tolerance: 'pointer',
                opacity: 0.6,
                containment: 'parent',
                placeholder: 'ui-state-highlight',
                change: function(e, ui) {
                    forceHelper(e,ui);
                },
                stop: function (event, ui) {
                    // do something
                }
            });
        });