PPP*_*PHP 6 javascript jquery dialog jquery-ui jquery-ui-dialog
是否有可能将包含(限制在另一个元素的边界)添加到jQuery UI的Dialog？
Mac*_*Mac 10
@Mottie在正确的轨道上,但有一个更简单,更好的解决方案:
var container = $('.dialog-container'),
dialog = $('.ui-dialog');
dialog.draggable( "option", "containment", container );
与Mottie的解决方案不同,如果视口调整大小,这不会中断.我在这里分叉了JSFiddle .
@Mac 的方向是正确的，但解决方案并不完整。您还必须设置对话框的可调整大小小部件的包含范围。如果您只设置 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>您可以将对话框作为目标并对其应用遏制。尝试这个：
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] );
编辑：我为你设置了一个演示。
Edit2：更改为使用对话框outerWidth和outerHeight