【问题标题】: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:更改为使用对话框外宽度和外高度

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-07-21
    • 2012-03-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多