Question

我正在使用jQuery UI Dialog小部件在网页上打开多个窗口。默认情况下，这些窗口可以移动 - 从它的外观来看，jQuery UI利用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对话框启用页面滚动

1 个答案: