jquery - 如何在拖动过程中修复 jQuery UI 对话框的大小？

Question

这是一个简单的对话框，如下代码所示，只要拖动对话框，它的高度就会减小。当我设置对话框的 ressized = false 时，它​​的高度值甚至会改变。最后我通过在 DragStop 事件处理程序中重新更新对话框高度来修复它。

我发现有人报告了类似的问题 here ，但这是在 IE 下，作者建议不要设置高度值，恕我直言，并不适合所有用例。

我正在使用 Chrome 和 jQuery UI 1.8.19

<p><a id="edit" href="#">Open Editor</a></p>
<div id="editor"></div>

$(document).ready(function ()
    {
        $("#edit").on("click", function ()
        {
                var $dialog = $("#editor")
                .dialog(
                {
                    title: "HTML Editor",
                    modal: true,
                    autoOpen: false,
                    width: 600,
                    height: 350,
                    minWidth: 300,
                    minHeight: 200,
                    closeOnEscape: true,
                    resizable: false,
                    open: function ()
                    {
                    },
                    buttons:
                    {
                        "Save": function ()
                        {
                            $(this).dialog("close");
                        },
                        "Cancel": function ()
                        {
                            $(this).dialog("close");
                        }
                    },
                    dragStop: function (e, ui)
                    {
                        $(this).dialog("option", "height", "377px");
                    }
                });
            }

            $dialog.dialog("open");
            return false;
        });
    });

更新1:我刚刚创建了一个新项目(ASP.NET MVC 4)，发现当我使用以下CSS规则时出现问题，为什么？

*
{
    margin: 0;
    padding: 0;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Answer 1

使用 box-sizing: border-box (使用默认模板)时，jQuery 计算对话框大小不正确。我通过在打开事件中存储对话框的高度来修复并在dragStart/dragStop事件中手动设置对话框高度:

                    dragStart: function (e, ui)
                    {
                        $(this).parent().height(height);
                    },
                    dragStop: function (e, ui)
                    {
                        $(this).parent().height(height);
                    }