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库。我在小提琴中选择了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');
});

这不起作用。可拖动的容器有效，但调整大小的容器失败HARD。我怪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/

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

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

1 个答案: