Javascript jQuery UI布局和将对话框约束到中心窗格

我正试图创建一个完整的页面界面使用优秀的

我希望中央窗格可以容纳多个对话框，并允许它们包含在该窗格中。到现在为止，一直都还不错。但是，我还希望能够将对话框“拖到一边”，并将它们移到右侧或底部，以便中心窗格可以显示滚动条，并允许中心窗格充当对话框的可滚动桌面。我希望其他窗格始终存在，以用于其他UI目的

HTML:

如您所见，它几乎可以工作，但滚动无法水平工作。我尝试过包含dialog1，但这会让事情变得更糟！也许这只是一个CSS问题，或者与设置相结合。有什么想法吗

---

我查看了文档，显然您可以通过使用CSS和更改溢出值来实现这一点

如您所见，应用的CSS是：

// disable scrolling in the other panes
.ui-layout-pane-north ,
.ui-layout-pane-west,
.ui-layout-pane-south {
    overflow: hidden !important;
}

.ui-layout-layout-center {
    overflow: auto
}

---

注意：请记住，虽然这允许水平滚动，但在我看来，这是一个有点棘手的问题。在Chrome下，如果我将鼠标放在垂直滚动条的边缘附近，并且鼠标移动正常，我可以很好地滚动。

我发现解决方案就是操纵对话框的底层：

$("#dialog2").dialog("widget").draggable(
{
    containment : [ 0, 0, 10000, 10000 ], 
    scroll: true, 
    scrollSensitivity : 100
});

显然，可以利用这些值来实现不同的结果。我希望这能帮助其他处于同样位置的人

---

您不能在不使用拖动功能的情况下拖动它们吗？我在你的掌控之中，然后对话1的行为就像2。可拖动的强制将对话1包含在中央面板上。dialog2可以稍微移出面板，但它不是我想要的。hmmm。我明白你的意思。我通常不喜欢推荐插件，但你签出了吗？谢谢。我会看一看，但不确定它是否与对话框一起工作。演示仅在拖动背景时才显示为拖动…感谢您的提交。然而，在Chrome dialog2中，我的动作和你的差不多。

// disable scrolling in the other panes
.ui-layout-pane-north ,
.ui-layout-pane-west,
.ui-layout-pane-south {
    overflow: hidden !important;
}

.ui-layout-layout-center {
    overflow: auto
}

$("#dialog2").dialog("widget").draggable(
{
    containment : [ 0, 0, 10000, 10000 ], 
    scroll: true, 
    scrollSensitivity : 100
});