ドラッグ可能でサイズ変更可能な JQuery-UI ダイアログの複数のインスタンスを使用しています。ダイアログ ボックスの 1 つをドラッグまたはサイズ変更するたびに、現在のボックスの位置と寸法がデータベースに保存され、次にページが開いたときに読み込まれます。
これはうまく機能しています。
ただし、ダイアログ ボックスを閉じてボタンを使用して再度開くと、jQuery はボックスの位置を画面中央の元の位置に戻します。さらに、ショーエフェクトを使用して、ボックスを閉じるときに左にスライドさせ、再度開くときに左からスライドさせます。
アニメーションのスライドが完了したときにその位置を更新する 2 つの方法を見つけましたが、それでも画面の中央にスライドし、本来あるべき位置に向かってスライドさせる方法をまだ見つけていません。 .
これに関与するコードの部分は次のとおりです。
$('.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")
}
}
jQuery-UI がボックスを非表示にしたり (display:none 以外)、ボックスをスライドさせたりするために、jQuery-UI が何をするのかわかりません。
基本的に、ボックスの位置を記憶し、再度開いたときにボックスをその場所に戻すには、JQuery が必要です。
ここまで来るのに何日もかかりましたが、これは私がまだ克服していない障害の 1 つです。
箱をもう一度開ける別の方法があるかもしれません。
ありがとう！
編集：
忘れました-この問題は、UpdatePos関数を使用してボックスの場所を設定した場合にのみ発生します(つまり、ページの読み込み時)。マウスでボックスをドラッグして閉じ、再度開くと、すべてが機能します。だから、私がここで見逃しているボックスの位置の保管場所がもう1つあると思います...
EDIT2：
さらにいじった後、デバッグ用のコードは次のようになります。
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
そのため、ウィジェットが画面外に移動され (左 = -78.5)、アニメーションのために移動されたように見えます。その後、私のコードはそれをあるべき場所 (121/107) に移動します。
position() は、このデバッグ セクションの結果になる$box.position()か$box.dialog().position()、変更されません。
多分これはここの誰かを助けるでしょう-私はまだここでアイデアがありません...
...そして、アイテムを自分の周りにドラッグして閉じてから再度開くと、非常に予測できないことがわかりました。場合によっては、垂直方向ではなく、水平方向の正しい位置に配置されることがあります。時々、画面の中央に戻ってしまうことがあります...
EDIT3：
だからここにjsfiddleバージョンがあります：