Question

我正在尝试在位于表格上方的叠加层上使用可调整大小的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>

任何想法都赞赏。

JQuery Resizable函数仅适用于部分选择器

0 个答案: