Question

如何正常调整大小＆amp;在滚动的窗口/区域中拖动UI对话框？

Dialog的上/左校正是否真的有必要？（如何纠正两者都有效的坐标）

修复Dialog怎么样？那会有什么变化？

这是一个jQuery-UI错误吗？

$("#myD").dialog({
    title: "Dialog TITLE",
    modal: true,
    resizable: true,
    draggable: true,
    closeOnEscape: true,
    width: 400,
    height: 300,
    position: { my: "left top", at: "left+350 top+200"},
    buttons: buttons,
    open:   function(event, ui) {
        // Set UI-Dialog fixed
        $(this).parent().css("position","fixed");
        /*
        var top = parseInt($(this).parent().css("top"));
        var left = parseInt($(this).parent().css("left"));
        var scrollTop = $(document).scrollTop();
        var scrollLeft = $(document).scrollLeft();
        var newTop = top - scrollTop;
        var newLeft = left - scrollLeft;
        $(this).parent().css("top",newTop+"px");
        $(this).parent().css("left",newLeft+"px");
        */
    }    
});

我以这种方式看到了一些问题，但没有找到满意的答案。

我正在使用jQuery 1.9.1和jQuery UI 1.10.4

由于

jsfiddle example (try resize, drag, resize again, etc.)

编辑：找到相关的jQuery UI Bug

Answer 1

我找到了解决方案。通过以下代码，我们可以在UI 1.10.4中修复此错误（覆盖_mouseStart函数）：

/**
* jQuery-UI-Dialog-Resize bugfix for UI 1.10.4
*/
(function() {
    function num(v) {
        return parseInt(v, 10) || 0;
    }

    $.widget( "ui.resizable", $.ui.resizable, {
    _mouseStart: function(event) {
        console.log( "custom _mouseStart" );
        var curleft, curtop, cursor,
            o = this.options,
            iniPos = this.element.position(),
            el = this.element;

        this.resizing = true;

        // bugfix for http://dev.jquery.com/ticket/1749
        if ( (/absolute/).test( el.css("position") ) ) {
            el.css({ position: "absolute", top: el.css("top"), left: el.css("left") });
        } else if ( (/fixed/).test( el.css("position") ) ) {
            console.log( "bugfix" );
        } else if (el.is(".ui-draggable")) {
            el.css({ position: "absolute", top: iniPos.top, left: iniPos.left });
        }

        this._renderProxy();

        curleft = num(this.helper.css("left"));
        curtop = num(this.helper.css("top"));

        if (o.containment) {
            curleft += $(o.containment).scrollLeft() || 0;
            curtop += $(o.containment).scrollTop() || 0;
        }

        //Store needed variables
        this.offset = this.helper.offset();
        this.position = { left: curleft, top: curtop };
        this.size = this._helper ? { width: this.helper.width(), height: this.helper.height() } : { width: el.width(), height: el.height() };
        this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.width(), height: el.height() };
        this.originalPosition = { left: curleft, top: curtop };
        this.sizeDiff = { width: el.outerWidth() - el.width(), height: el.outerHeight() - el.height() };
        this.originalMousePosition = { left: event.pageX, top: event.pageY };

        //Aspect Ratio
        this.aspectRatio = (typeof o.aspectRatio === "number") ? o.aspectRatio : ((this.originalSize.width / this.originalSize.height) || 1);

        cursor = $(".ui-resizable-" + this.axis).css("cursor");
        $("body").css("cursor", cursor === "auto" ? this.axis + "-resize" : cursor);

        el.addClass("ui-resizable-resizing");
        this._propagate("start", event);
        return true;
    }
});

}）（）;

完成！

PS。 jsfiddle示例已更新

在滚动的窗口/区域中没有跳跃拖动/调整大小对话框？

1 个答案: