jQuery UI - 防止在父 div 之外调整对话框的大小

Question

问题： 在对话框上调整大小时，我想防止它超出父 div dialog-container。出于某种原因，containment 没有按我的预期工作。我还能尝试什么？

HTML：

<div id="top"></div>
<div id="dialog-container">
  <div id="dialog">My dialog</div>
</div>

JS：

$(document).ready(function() {
    jQuery("#dialog").dialog({
                            autoOpen:true,
                            modal: false,
                            resizable: true,
                            draggable: true,
                            closeOnEscape: true,
                            title: "Title",
        open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                jQuery('#dialog').dialog('close');
            })
        }
    }).parent().draggable({
        containment: '#dialog-container'
    }).resizable({
        containment: '#dialog-container'
    });
});

JSFIDDLE： https://jsfiddle.net/4zfmbktr/

Answer 1

首先，我强烈建议迁移到更新的 jQuery UI 库。我发现你的 Fiddle 中选择的 jQuery UI 1.8.18 有很多奇怪的问题。

我发现其中一件事是它忽略了应用于可调整大小的options。如果您阅读this article，它会讨论如何设置此选项。跳到 Jason C 的答案之上。这就是我开始的地方：

JavaScript

$(function() {
  $("#dialog").dialog({
    autoOpen: true,
    modal: false,
    resizable: false,
    draggable: true,
    closeOnEscape: true,
    title: "Title",
    open: function() {
      $('.ui-widget-overlay').bind('click', function() {
        $('#dialog').dialog('close');
      })
    }
  });
  var ui = $("#dialog").closest(".ui-dialog");
  ui.draggable("option", "containment", '#dialog-container');
  ui.resizable("option", "containment", '#dialog-container');
});

这不起作用。可拖动的遏制有效，但调整遏制的大小失败了。我责怪 1.8.18。我可能会用现代的 1.12.1 再次测试一下。

这并不意味着你不能使用 1.8.18，如果你不能改变你的库，这里有一个变通方法。这里有一些警告。

工作示例：https://jsfiddle.net/Twisty/2vaf3dr5/39/

JavaScript

$(function() {
  $("#dialog").dialog({
    autoOpen: true,
    modal: false,
    resizable: false,
    draggable: true,
    closeOnEscape: true,
    title: "Title",
    open: function() {
      $('.ui-widget-overlay').bind('click', function() {
        $('#dialog').dialog('close');
      })
    }
  });
  var ui = $("#dialog").closest(".ui-dialog");
  ui.draggable("option", "containment", '#dialog-container');
  ui.resizable({
    handles: "n, e, s, w, se",
    minHeight: 150,
    minWidth: 150,
    resize: function(e, ui) {
      var contPos = $("#dialog-container").position();
      contPos.bottom = contPos.top + $("#dialog-container").height();
      contPos.right = contPos.left + $("#dialog-container").width();
      contPos.height = $("#dialog-container").height();
      contPos.width = $("#dialog-container").width();
      if (ui.position.top <= contPos.top) {
        ui.position.top = contPos.top + 1;
      }
      if (ui.position.left <= contPos.left) {
        ui.position.left = contPos.left + 1;
      }
      if (ui.size.height >= contPos.height) {
        ui.size.height = contPos.height - 7;
      }
      if (ui.size.width >= contPos.width) {
        ui.size.width = contPos.width - 7;
      }
    }
  });
});

我在对话框中去掉了预先配置的可调整大小的选项，并直接写出了选项。同样，遏制在这里不起作用，所以我必须制作自己的自定义调整大小逻辑。最后，这符合您的预期。

其中一个奇怪或警告是，它正在读取鼠标移动，并且即使鼠标超出边界也会继续这样做。所以顶部和左侧停止......但宽度和高度继续增长。我不知道为什么，你知道我会把手指指向哪里。

我确实尝试过切换您的库，并且调整大小...好一点。高度仍然很奇怪，但宽度却没有。见这里：https://jsfiddle.net/Twisty/2vaf3dr5/44/

这应该能让你继续前进，我希望它会有所帮助。