0

我正在尝试在位于表格上方的叠加层上使用可调整大小的 JQuery。下面的代码将 div 创建为绝对定位的叠加层，可在列之间调整大小和拖动。

代码工作正常。但是，当我在“resizeable”jquery ui 函数上添加“containment”作为选项时，代码仅适用于指定为选择器的表的一部分（即#grid）。

我添加了一个 JsFiddle http://jsfiddle.net/WUsRx/5/，虽然 resizeable 的代码似乎在 FsFiddle 中不起作用，但对于 Explorer 8 中的 #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 中的一列包含在下面。在 #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>

任何想法表示赞赏。

4

0 回答 0