如何在 jQuery UI 对话框上设置包含？答案

【问题标题】：How do I set the containment on a jQuery UI Dialog?如何在 jQuery UI 对话框上设置包含？
【发布时间】：2011-02-23 14:56:58
【问题描述】：

是否可以在 jQuery UI 的Dialog 中添加包含（限制到另一个元素的边界）？

【问题讨论】：

你的意思是收容……？我不清楚你在这里追求什么，澄清一下？
我的意思是我想指定可以拖动对话框的区域。现在它可以在整个浏览器窗口中拖动..

标签： javascript jquery jquery-ui dialog jquery-ui-dialog

【解决方案1】：

@Mottie 在正确的轨道上，但有一个更简单更好的解决方案：

var container = $('.dialog-container'),
    dialog = $('.ui-dialog');
dialog.draggable( "option", "containment", container );

与 Mottie 的解决方案不同，如果调整视口大小，这不会中断。我已经分叉了 JSFiddle here。

【讨论】：

+1 这很有帮助。此外，值得注意的是 container 实际上不必是 dialog 元素的父元素。它可以是您想要限制对话框移动到的任何元素。
@Nikhil：是的，这绝对值得一提。感谢您添加！
您还需要set the containment for the resizable widget，否则在调整大小时仍然可以越界。

【解决方案2】：

@Mac 在正确的轨道上，但解决方案并不完整。您必须还设置对话框的Resizable 小部件的包含。如果你只设置 Draggable，你会在拖动时得到遏制，但是当你抓住边缘并调整大小时，你仍然会超出边界。

所以你会想要这样做，假设 #mydialog 是你最初创建对话框的元素，#boundary 是你希望限制它的元素（顺便说一下，容器参数也可以是一个选择器）：

let ui = $('#mydialog').closest('.ui-dialog');       // get parent frame
ui.draggable('option', 'containment', '#boundary');  // <-- drag, but not resize
ui.resizable('option', 'containment', '#boundary');  // <-- don't forget!!!

这是一个示例 sn-p，切换复选框以在 'document'（默认）和 '#area' 之间切换相应小部件的限制。然后尝试通过标题栏拖动对话框，通过边缘调整对话框大小。请注意仅选择“限制拖动”时会发生什么：

// Create dialog from #win with mostly default options.
$('#win').dialog({
  width: 200,
  height: 150,
  position: { my: 'center', at: 'center', of: '#area' }
});

// When checkbox changed, update confinement settings.
$('#draggable, #resizable').change(function () {
  let d = $('#draggable').prop('checked');
  let r = $('#resizable').prop('checked');
  let ui = $('#win').closest('.ui-dialog');
  ui.draggable('option', 'containment', d ? '#area' : 'document');
  ui.resizable('option', 'containment', r ? '#area' : 'document');
});

#area {
  position: relative;
  left: 2ex;
  top: 2ex;
  width: 400px;
  height: 300px;
  border: 1px solid red;
}

#win {
  font-size: 10pt;
  display: flex;
  flex-direction: column;
}

label {
  display: flex;
  align-items: center;
}

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>
  <div>Example</div>
  <div id="area"></div>
  <div id="win" title="test">
    <label><input type="checkbox" id="draggable">Contain drag</label>
    <label><input type="checkbox" id="resizable">Contain resize</label>
  </div>
</body>

【讨论】：

【解决方案3】：

您可以定位对话框并对其应用遏制。试试这个：

var container = $('.dialog-container'),
    dialog = $('.ui-dialog');
// get container top left corner locations
var cx1 = container.offset().left,
    cy1 = container.offset().top;
// get dialog size
var dw = dialog.outerWidth(),
    dh = dialog.outerHeight();
// get container bottom right location, then subtract the dialog size
var cx2 = container.width() + cx1 - dw,
    cy2 = container.height() + cy1 - dh;
dialog.draggable( "option", "containment", [cx1, cy1, cx2, cy2] );

编辑：我为你设置了a demo。
Edit2：更改为使用对话框外宽度和外高度

【讨论】：

这个问题是如果你调整视口的大小，那么功能就会中断......
@Lee：这很容易解决，请参阅我的答案。
别忘了set the containment for the resizable widget。