为 jQuery UI 对话框启用页面滚动

Question

我正在使用 jQuery UI Dialog widget to open up multiple windows on a webpage. By default, these windows can be moved around - and from the looks of it, jQuery UI leverages the Draggable 来完成此操作。

Draggable 允许您拖动的项目垂直扩展页面以跟随您拖动的项目（如果您将 "scroll" 选项设置为 true）。但是，Dialog 使用 Draggable 的方式并没有启用该功能，我不知道如何打开它。

我尝试了下面的代码但没有成功（包括在元素加载后尝试第二行，以防它在启动时没有生效）：

$("#my_div").dialog ();
$("#my_div").parent ().draggable ('option','scroll',true);

Answer 1

您可以链接 .dialog('widget') 方法来检索包含生成的包装器的 jQuery 对象。然后将可拖动的 containment 属性更改为 false:

这是一个例子：

$('#dialog').dialog().dialog('widget').draggable('option', 'containment', false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>

<div id="dialog" title="Basic dialog">
  <p>Basic jQuery-UI dialog that can be dragged off the screen.</p>
</div>

为 jQuery UI 对话框启用页面滚动

Enable page scrolling for jQuery UI Dialogs

jquery

jquery-ui

widget