14

JQuery UI の機能は要素.resizableをサポートしていません。position: fixed;サイズを変更しようとすると、位置属性が絶対に切り替わります。推奨される修正はありますか?

いくつかのチャット ウィンドウがポップアップ表示され、ドキュメント内でドラッグできます。後ろのページでスクロールしないように位置が固定されています。ウィンドウのサイズを変更しようとするまで、それらはすべて完全に機能します。それは、ウィンドウが遷移しposition: absolute;てページがスクロールしたときに取り残されるときです。

サイズ変更停止イベントを処理し、位置を固定に変更してみました:

    stop: function (event, ui)
    {
        $(chatWindow).css('position', 'fixed');
    }

配置 (top:およびleft:) が固定要素に対して正しくなく、要素のサイズ変更を停止すると、要素が固定配置に切り替わり、ページ上の奇妙な場所にジャンプするため、これは機能しません。ページ境界から飛び出し、永遠に失われることがあります。

助言がありますか？

4

7 に答える 7

6

私のように、ページの下部に固定 div がある場合は、これらの css ルールに !important を追加して、下部に貼り付けることができます。

.fixed {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
}

そして、北の境界線でサイズ変更可能にするだけです:

$('.fixed').resizable({
  handles: "n"
});
于 2013-02-05T22:03:40.753 に答える
2

これが私が思いついた解決策です。これは私が望むよりも少し多くのコードですが、問題を解決します:

$("#test").resizable({stop:function(e, ui) {
    var pane = $(e.target);
    var left = pane.attr("startLeft");
    var top = pane.attr("startTop");
    pane.css("position", "fixed");
    pane.css("top", top);
    pane.css("left", left);
}});
$("#test").draggable({create: function(e, ui) {
    var pane = $(e.target);
    var pos = pane.position();
    pane.attr("startLeft", pos.left + "px");
    pane.attr("startTop", pos.top + "px");
}, stop: function(e, ui) {
    var pane = $(e.target);
    pane.attr("startLeft", ui.position.left + "px");
    pane.attr("startTop", ui.position.top + "px");
}});

これは、html 要素に上と左の位置を格納し (xhtml doctype が有効である必要があります)、その情報を使用して、サイズ変更イベントの終了時に位置を設定します。

于 2011-02-04T20:46:26.917 に答える
2

美しさはありませんが、サイズ変更の開始時に位置（上と左）を別々の変数に保存するのはどうですか（メソッドは「開始」と呼ばれると思います）？

更新 (コメントありがとうございます...イベントの発生が遅すぎます): JqueryUI がオブジェクトのサイズを変更可能にするときに 2 番目のオブジェクト "ui" を生成すると、その ui オブジェクトにフィールド: ui.originalPosition が与えられます...サイズ変更前の固定要素の位置...

于 2011-01-27T17:14:07.503 に答える
1

これは汚い解決策ですが、私にとってはうまくいきます。

this.resizable({
    start:function (event, ui){
         x =ui.originalPosition.left+ $(ui.originalElement).parent().scrollLeft()
         y = ui.originalPosition.top+ $(ui.originalElement).parent().scrollTop()
    },
    resize:function (event, ui){
         $(ui.originalElement).css('left' , x);
         $(ui.originalElement).css('top' , y);
}
于 2013-02-07T17:14:39.677 に答える
0

私は今日その問題を抱えており、「美的でない」回避策は絶対に嫌いです...そこで、「より良い」解決策がないかどうかを確認するために少し実験することにしました...そして、ある時点で予感がしました:

html:

<div class="fixed"></div>

javascript (jquery):

$('.fixed').resizable();
$('.fixed').draggable();

CSS:

.fixed{
    position: fixed !important;
}

Jquery は CSS に圧倒されました。

于 2012-05-15T13:34:36.417 に答える