Question

我有一个'toolbar'div，我可以通过jQuery UI调整大小。

奇怪的是，我无法拖动div，除非div延伸超过可查看的页面，使滚动条显示出来。然后我可以将div拖到我喜欢的任何地方。但是，如果我拖动div以使其适合没有滚动条的页面，并且我放弃，我无法再次调整它（除非我使页面变小，以便再次显示滚动条！）。

这是html：

 <div class="Viewer">
    <div align="center">
        <div align="left" style="position:relative; width:100%; height:30px;">
            <div id="toolbar_buttons" class="ToolBar">
                <table>
                    <tr>
                        <td>
                            <button id="play">play</button>
                        </td>
                        <td>
                            <button id="stop">stop</button>
                        </td>
                        <td>
                            <div id="slider-vertical"></div>
                        </td>
                        <td style="width:30px;">
                            <!--<input type="text" id="amount" style="border:0; display:none; font-weight:bold;" />--> 
                            <span id="amount"></span>
                        </td>
                        <td>
                            <button id="btnScreenSizer">fit to screen</button>
                        </td>
                        <td>
                            <div id="status">status stuff goes here</div>
                        </td>
                    </tr>
                </table>

            </div>

            <div id="toolbar" class="ui-widget-header"></div>

        </div>
    </div>
</div>

这是CSS：

#toolbar
{
    display:    none; 
    width:      300px; 
    height:     45px; 
    z-index:    -999999;
}

这是jQuery：

$("#toolbar").resizable({
    handles: "se",
    maxHeight: 45,
    minHeight: 45,
    minWidth: 400
});

有什么想法吗？工具栏位于iFrame中。

Answer 1

我不确定问题到底是什么，但我解决了我遇到的问题。

我删除了带有id ='toolbar'的div，并将ui-widget-header类添加到'toolbar_buttons'div中，如下所示：

        <div id="toolbar_buttons" class="ToolBar ui-widget-header">
            <table>
                <tr>
                    <td>
                        <button id="play">play</button>
                    </td>
                    <td>
                        <button id="stop">stop</button>
                    </td>
                    <td>
                        <div id="slider-vertical"></div>
                    </td>
                    <td style="width:30px;">
                        <!--<input type="text" id="amount" style="border:0; display:none; font-weight:bold;" />--> 
                        <span id="amount"></span>
                    </td>
                    <td>
                        <button id="btnScreenSizer">fit to screen</button>
                    </td>
                    <td>
                        <div id="status">status stuff goes here</div>
                    </td>
                </tr>
            </table>

        </div>

现在我可以随时拖动。

jQuery 1.4.2 resizable div一旦适合浏览器窗口就停止工作

1 个答案: