Jquery 重新打开关闭的对话框将其移动后置于开始位置

我正在使用jQueryUI对话框的多个实例以及可拖动和可调整大小的实例。 每当我拖动或调整其中一个对话框的大小时，当前对话框的位置和尺寸将保存到数据库中，然后在下次打开页面时加载

这很有效

但是，当我关闭对话框并使用按钮重新打开它时，jQuery会将对话框的位置设置回其在屏幕中心的原始位置。 此外，我使用显示效果在关闭时将框滑到左侧，在重新打开时从左侧滑入

我找到了两种方法来更新它的位置，当滑入动画完成时，但是，它仍然滑入屏幕的中心，我还没有找到一种方法让它滑入它应该有的位置

以下是代码中起作用的部分：

    $('.box').dialog({
        closeOnEscape: false,
        hide: { effect: "drop", direction: 'left' },
        beforeClose: function (evt, ui){
            var $this = $(this);

            SavePos($this);  // saves the dimensions to db
        },
        dragStop: function()
        {
            var $this = $(this);

            SavePos($this);
        },
        resizeStop: function()
        {
            var $this = $(this);

            SavePos($this);
        },
        open: function()
        {
            var $this = $(this);
            $this.dialog('option', { show: { effect: "drop", direction: 'left'} } );
            if (init)  // meaning only load this code when the page has finished initializing
            {
                // tried it both ways - set the position before and after the effect - no success
                UpdatePos($this.attr('id')); 
                // I tried this section with promise() and effect / complete - I found no difference
                $this.parent().promise().done(function() {
                    UpdatePos($this.attr('id')); 
                });
            }
        }
    });

function UpdatePos(key)
{
    // boxpos is an object holding the position for each box by the box's id
    var $this = $('#' + key);
    //console.log('updating pos for box ' + boxid);
    if ($this && $this.hasClass('ui-dialog-content'))
    {
        //console.log($this.dialog('widget').css('left'));
        $this.dialog('option', { width: boxpos[key].width, height: boxpos[key].height });
        $this.dialog('widget').css({ left: boxpos[key].left + 'px', top: boxpos[key].top + 'px' });
        //console.log('finished updating pos');
        //console.log($this.dialog('widget').css('left'));
    }
}

重新打开该框的按钮上有以下代码：

var $box = $('#boxid');
if ($box)
{
    if ($box.dialog('isOpen'))
    {
        $box.dialog('moveToTop');
    }
    else
    {
        $box.dialog("open")
    }
}

我不知道jQueryUI对这个框做了什么，因为它隐藏了它（除了display:none）或者让它滑入，所以这里可能缺少一些东西可以帮助

基本上，我需要JQuery记住框的位置，并在重新打开时将框放回该位置

我花了好几天才走到这一步，但这是我尚未克服的一个障碍

也许有别的方法可以让我重新打开盒子

谢谢

编辑：

忘记-仅当我使用UpdatePos函数设置框的位置（即页面加载）时，才会发生此问题。当我用鼠标拖动一个盒子，将其关闭，然后重新打开时，一切正常。所以我猜还有一个我在这里丢失的盒子位置的存储位置

编辑2：

在对其进行了更多的处理之后，我的调试代码现在看起来如下所示：

        open: function()
        {
            var $this = $(this);
    console.log('box open');
    console.log($this.dialog('widget').position());  // { top=0, left=-78.5}
    console.log($this.dialog('widget').css('left'));
            $this.dialog('option', { show: { effect: "drop", direction: 'left'} } );
            if (init)
            {
                UpdatePos($this.attr('id')); 
                $this.parent().promise().done(function() {
    console.log($this.dialog('widget').position());  // { top=313, left=641.5}
    console.log($this.dialog('widget').css('left'));
                    UpdatePos($this.attr('id')); 
    console.log($this.dialog('widget').position());  // { top=121, left=107}
    console.log($this.dialog('widget').css('left'));
                });
            }

我得到的结果是：

box open
Object { top=0, left=-78.5}
-78.5px
Object { top=313, left=641.5}
641.5px
Object { top=121, left=107}
107px

因此，在我看来，小部件似乎正在移出屏幕（left=-78.5），然后为动画而移动，然后我的代码将其移动到它应该所在的位置（121/107）

$box.position（）

或

$box.dialog（）.position（）

的position（）结果在此调试部分期间不会更改

也许这会对这里的人有所帮助-我仍然没有主意

。。。我刚刚发现，当我把物品拖到自己身上，然后关闭并重新打开它时，它是非常不可预测的。有时，它会在水平方向上到达正确的位置，而不是垂直方向。有时，它会回到屏幕中央

编辑3：

下面是一个JSFIDLE版本：

---

感谢所有看过的人，但我找到了解决办法

我没有使用内置的

拖放

，而是决定尝试使用

动画

手动执行，因为我有更多的控制权。所以现在的相关代码是：

    $('.box').dialog({
        // REMOVED: hide: { effect: "drop", direction: 'left' },
        beforeClose: function (evt, ui){
            var $this = $(this);

            SavePos($this);

            $this.dialog('option', 'position', [ parseInt(boxpos[$this.attr('id')].left), parseInt(boxpos[$this.attr('id')].top) ]);

            $this.dialog('widget').animate({
                left: -$this.dialog('option', 'width') + 'px',
                opacity: 0
            }, 200, function(){
                // animation complete
            });
        },
        open: function()
        {
            var $this = $(this);
            // REMOVED: $this.dialog('option', { show: { effect: "drop", direction: 'left'} } );
            if (init)
            {
                UpdatePos($this.attr('id')); 
                $this.parent().promise().done(function() {
                    UpdatePos($this.attr('id')); 
                });
            }

            var thisLeft = $this.dialog('widget').css('left');
            $this.dialog('widget').css({
                'left': -$this.dialog('option', 'width') + 'px',
                'opacity': 0
            });
            $this.dialog('widget').animate({
                left: thisLeft,
                opacity: 1
            }, 200, function(){
                // animation complete
            });
        }
    });

使用这个，我现在设置了滑入和滑出效果的开始和结束位置，现在效果很好

我仍然不确定最初的问题是什么，但它似乎与

$box.dialog（'option'，'position'）

有关。我会把我的发现记在这里，以防别人觉得有趣

默认情况下，位置为

{}

。如果是这种情况，jquery假定默认值为

{my:“center”，at:“center”，of:window}

虽然文档声称使用数组将位置设置为x/y坐标是不可取的，但我注意到，当我拖动框时，

position

突然显示为类似于

[107250]

当我试图在打开前手动设置

位置

时，我的

控制台.log

条目显示

位置

首先设置回

{}

（转换为“屏幕中心”），然后设置动画，然后将其设置回坐标

我不知道这里的背景是什么，我非常清楚我的代码对

dialog

：-）背后的原始想法是多么的“滥用”），所以我想我应该停止思考为什么我疯狂的使用这个功能的想法没有达到我想要的效果（以及它可能从来没有设计过的效果）并找到另一种方法来获得同样的效果-这是有效的

---

再次感谢您的关注

你能创建一个提琴来演示这个问题吗？很多代码都是用PHP从数据库数据创建的，所以需要做一些工作和简化，我在一天的工作结束后，但我会在早上第一件事创建一些东西。添加了JSFIDLE（现在它工作了）。那么你现在工作正常了吗？我看了你的小提琴，没有发现模态盒在关闭后改变位置的任何问题。。哦，但是你最近的小提琴有一些问题。。因此，当您修复小提琴时，出现了一些问题，因此modals将在页面加载时以不同的位置/大小初始化。