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

首先，我会强烈建议移动到较新的jQueryUI图书馆。我在 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;
      }
    }
  });
});

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

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

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

这应该可以帮助您，希望对您有所帮助。

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

jQuery UI - prevent resizing of dialog outside the parent div

javascript

jquery-ui

jquery-ui-resizable