Question

当我 快速调整 对话框时，jqueryui对话框位于窗口的右边在左侧，对话框的宽度设置得很粗糙。我的意思是快速调整大小，快速移动鼠标然后快速释放鼠标，我将在后面解释这样做的原因。

为了让我的话更清楚，我创造了一个jsfiddle：https://jsfiddle.net/sangelee/hw62erug/6/embedded/result/

您可以尝试自己在jsfiddle中所做的事情，但请记住，您应该首先将对话框放在容器的右边缘：
http://jqueryui.com/dialog/

在jqueryui源代码中，在调整对话框时执行以下代码段：

resize: function( event ) {
    var woset, hoset, isParent, isOffsetRelative,
        that = $( this ).resizable( "instance" ),
        o = that.options,
        co = that.containerOffset,
        cp = that.position,
        pRatio = that._aspectRatio || event.shiftKey,
        cop = {
            top: 0,
            left: 0
        },
        ce = that.containerElement,
        continueResize = true;

    if ( ce[ 0 ] !== document && ( /static/ ).test( ce.css( "position" ) ) ) {
        cop = co;
    }

    if ( cp.left < ( that._helper ? co.left : 0 ) ) {
        that.size.width = that.size.width +
            ( that._helper ?
                ( that.position.left - co.left ) :
                ( that.position.left - cop.left ) );

        if ( pRatio ) {
            that.size.height = that.size.width / that.aspectRatio;
            continueResize = false;
        }
        that.position.left = o.helper ? co.left : 0;
    }

    if ( cp.top < ( that._helper ? co.top : 0 ) ) {
        that.size.height = that.size.height +
            ( that._helper ?
                ( that.position.top - co.top ) :
                that.position.top );

        if ( pRatio ) {
            that.size.width = that.size.height * that.aspectRatio;
            continueResize = false;
        }
        that.position.top = that._helper ? co.top : 0;
    }

    isParent = that.containerElement.get( 0 ) === that.element.parent().get( 0 );
    isOffsetRelative = /relative|absolute/.test( that.containerElement.css( "position" ) );

    if ( isParent && isOffsetRelative ) {
        that.offset.left = that.parentData.left + that.position.left;
        that.offset.top = that.parentData.top + that.position.top;
    } else {
        that.offset.left = that.element.offset().left;
        that.offset.top = that.element.offset().top;
    }

    woset = Math.abs( that.sizeDiff.width +
        (that._helper ?
            that.offset.left - cop.left :
            (that.offset.left - co.left)) );

    hoset = Math.abs( that.sizeDiff.height +
        (that._helper ?
            that.offset.top - cop.top :
            (that.offset.top - co.top)) );

    if ( woset + that.size.width >= that.parentData.width ) {
        that.size.width = that.parentData.width - woset;
        if ( pRatio ) {
            that.size.height = that.size.width / that.aspectRatio;
            continueResize = false;
        }
    }

    if ( hoset + that.size.height >= that.parentData.height ) {
        that.size.height = that.parentData.height - hoset;
        if ( pRatio ) {
            that.size.width = that.size.height * that.aspectRatio;
            continueResize = false;
        }
    }

    if ( !continueResize ) {
        that.position.left = that.prevPosition.left;
        that.position.top = that.prevPosition.top;
        that.size.width = that.prevSize.width;
        that.size.height = that.prevSize.height;
    }
}

在上面的代码中，有一个条件语句：

if ( woset + that.size.width >= that.parentData.width ) {
        that.size.width = that.parentData.width - woset;
        if ( pRatio ) {
            that.size.height = that.size.width / that.aspectRatio;
            continueResize = false;
        }
    }

woset是元素的上一个$(element).offset().left，但that.size.width是元素的当前新宽度，woset使用前一个值但不是当前偏移的原因，或者只使用event.pageX？

我试过，如果woset被event.pageX替换，或删除语句that.size.width = that.parentData.width - woset;，我在jsfiddle中显示的对话框右侧的闪烁将不会发生，对话框的大小调整行为仍然有效。那么为什么要添加这个条件语句？

如果对话框未放置在窗口的右边缘，则不会传递条件语句，并且不会重置对话框的宽度。这就是为什么只有窗口右边缘关闭的对话框才会没有正确设置宽度的原因。

也许我没有在上面说清楚，所以我在这里给出另一个例子。

对话框最初放置在窗口的右边缘，其偏移量为left: 1600, top: 0，width: 300。 woset + that.size.width == that.parentData.width在这里是正确的，因为对话框关闭到窗口的右边缘。窗口宽度最初设置为1900.要在左侧快速模拟调整大小：

var mouseover_event = new MouseEvent('mouseover', {
    bubbles: true,
    button: 0,
    cancelBubble: false,
    cancelable: true,
    clientX: 1600,
    clientY: 300,
    pageX: 1600,
    pageY: 300
});
var mousedown_event = new MouseEvent('mousedown', {
    bubbles: true,
    button: 0,
    cancelBubble: false,
    cancelable: true,
    clientX: 1600,
    clientY: 300,
    pageX: 1600,
    pageY: 300
});
var mousemove_event = new MouseEvent('mousemove', {
    bubbles: true,
    button: 0,
    cancelBubble: false,
    cancelable: true,
    clientX: 1300,
    clientY: 300,
    pageX: 1300,
    pageY: 300
});
var resize_handler = document.querySelector('.ui-resizable-handle.ui-resizable-w');
resize_handler.dispatchEvent(mouseover_event);
resize_handler.dispatchEvent(mousedown_event);
resize_handler.dispatchEvent(mousemove_event);

在调度事件后，对话框的位置和宽度应为：left: 1300; width: 600。

但是，在执行上面的条件语句时，if ( woset + that.size.width >= that.parentData.width ) {，that.size.width被设置为新的对话框宽度600，但woset仍然是初始偏移1600，{{1是窗口的宽度，1600 + 600＆gt; 1900年，然后执行了跟随声明that.parentData.width，它将对话框的宽度设置为接近初始宽度300.似乎对话框刚被移动，未调整大小。所以我认为对话框的宽度问题是由该声明引起的。

我快速调整对话框大小的原因是我正在编写一个脚本来同步两个相同页面的事件，这意味着当一个事件发生在一个页面中时，将事件详细信息发送到另一个页面，然后调度相同的事件，就像上面的that.size.width = that.parentData.width - woset;一样。为了提高效率，在同步drag或resize事件时，只需在mouseup之前同步最后一次mousemove事件（这与快速调整对话框大小的行为相同）。

我使用的jqueryui版本是1.11.4。

我的问题：

为什么添加条件语句element.dispatchEvent(event)并重置对话框的宽度if ( woset + that.size.width >= that.parentData.width ) {，因为that.size.width = that.parentData.width - woset;已经设置正确？为什么that.size.width是'之前的值'而不是'当前值'？
对话框的宽度问题是否有任何变通方法？

jqueryui对话框：从左侧快速调整大小时，宽度无法正确计算

0 个答案: