jquery - JQuery Resizable関数は、セレクターの一部でのみ機能します

Question

テーブルの上にあるオーバーレイでサイズ変更可能なJQueryを使用しようとしています。以下のコードは、列間でサイズ変更およびドラッグ可能な絶対位置のオーバーレイとしてdivを作成します。

コードは正常に機能します。ただし、「サイズ変更可能な」jquery ui関数のオプションとして「containment」を追加すると、コードはセレクターとして指定されたテーブルの一部（つまり、＃grid）でのみ機能します。

JsFiddle http://jsfiddle.net/WUsRx/5/を追加しましたが、サイズ変更可能なコードはFsFiddleでは機能しないようですが、Explorer8の#gridテーブルの一部では機能します。

javascriptは次のとおりです。

$('#Grid td').click(function(){ 
        var $divName = $(this);
        $('#mainContent').prepend('<div id="test" class="ui-widget-content"></div>');
        var $divOverlay = $('#test');
        var tdPosition = $divName.position();
        offsetTop = tdPosition.top;
        offsetLeft = tdPosition.left;

        var tdWidth = $divName.width();
        var tdHeight = $divName.height();


        $divOverlay.css({
            position: 'absolute',
            top: offsetTop,
            left: offsetLeft,
            width: tdWidth,
            height: tdHeight,
            opacity: '0.8',
            })          

    $('#test').resizable({containment: "#Grid",grid:tdHeight,minWidth:tdWidth, maxWidth:tdWidth}).draggable({ containment: "#Grid", grid: [ tdWidth+2,tdHeight+2] });
    });

HTMLの1つの列が以下に含まれています。この問題は、毎回、＃15：30から＃16：00までのすべての列に表示されます。最初は、HTMLの変更または間違いである可能性があると考えたため、PHPを使用してループし、各行の一貫性を確保するためのテーブルを作成しました。＃16：00を超えると、サイズ変更可能なコードは機能しません。

<table id='Grid'>
  <tr id="14:30"><td>14:30</td><td class="wEnd sun" id="sun14:30"></td></tr>
  <tr id="15:00"><td>15:00</td><td class="wEnd sun" id="sun15:00"></td></tr>
  <tr id="15:30"><td>15:30</td><td class="wEnd sun" id="sun15:30"></td></tr>
  <tr id="16:00"><td>16:00</td><td class="wEnd sun" id="sun16:00"></td></tr>
  <tr id="16:30"><td>16:30</td><td class="wEnd sun" id="sun16:30"></td></tr>
</table>

どんな考えでもありがたいです。