如何设置jQuery UI对话框上的遏制？

是否可以添加遏制（限制在另一个元素的边界）jQuery UI的Dialog？如何设置jQuery UI对话框上的遏制？

2010-05-25 PPPHP

通过你的意思是遏制....？我不清楚你在这里后的情况，澄清一下？ – 2010-05-25 10:08:15

嗯，我的意思是我想指定对话框可以拖动的区域。现在它可以拖动到浏览器窗口的各个地方.. – PPPHP 2010-05-25 10:26:02

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

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：改到正确的轨道上使用对话outerWidth & outerHeight

来源

2010-05-25 11:59:53 Mottie

嘿，非常感谢！ – PPPHP 2010-05-27 10:19:14

这个问题是，如果您调整视口的大小，那么功能会中断... – 2012-11-29 14:17:21

@Lee：这很容易修复，请参阅我的答案。 – Mac 2013-04-09 06:37:15

@ Mottie的，但有一个简单，更好的解决方案：

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

不像Mottie的解决方案，这将不若视口调整大小打破。我已经分叉JSFiddle here。

来源

2013-04-09 06:21:21 Mac

+1这很有帮助。另外，值得注意的是'container'不一定是'dialog'元素的父对象。它可以是任何你想限制对话框移动的元素。 – Nikhil 2013-07-12 04:45:49

@Nikhil：是的，这绝对值得一提。感谢您的补充！ – Mac 2013-07-13 10:39:28

您还需要[设置'resizable'小部件的包容]（https://stackoverflow.com/a/44401699/616460），否则在调整大小时仍然可以跨越边界。 – 2017-06-07 00:32:25

@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!!!

下面是一个例子片断，切换复选框切换'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>

来源

2017-06-07 00:31:28

如何设置jQuery UI对话框上的遏制？

回答

相关问题