jquery - サイズ変更可能要素とドラッグ可能要素が互いに折りたたまれないようにするにはどうすればよいですか?

Question

こんにちは。次のコードがあります。

http://jsfiddle.net/g7Cgg/

ご覧のとおり、2 つの単純な DIV が上下に重ねられています。これらの DIV はそれぞれ、サイズ変更およびドラッグ可能に設定されています。ただし、最初の要素のサイズを変更しようとすると、2 番目の要素が最初の要素の上に折りたたまれます。私が見ることができることから、これはサイズ変更可能が要素を絶対位置に変更するためです。この動作を防ぐにはどうすればよいですか? 要素をドラッグする機能を保持しながら、要素のサイズを変更することは可能ですか?

また、要素の位置を相対位置に変更すると (.demo スタイルに position:relative !important を追加)、折りたたみが防止されますが、サイズ変更またはドラッグを開始すると要素が「ジャンプ」することにも注意してください。もう一つの奇妙な行動。ご協力いただきありがとうございます。

Answer 1

私の特定のケースでは、これを修正するために私がしたことは次のとおりです。

resizeableObj.resizable({
    start: function(event, ui) {        
        resizeableObj.css({
            position: "relative !important",
            top: "0 !important",
            left: "0 !important"
        });
    },
    stop: function(event, ui) {
        resizeableObj.css({
            position: "",
            top: "",
            left: ""
        });
    }
});

ご覧のとおり、サイズ変更可能な開始イベントで、位置を相対に設定し (ドラッグ可能とサイズ変更可能を同時に使用することで、絶対配置が追加されます)、上と左を 0 に設定して、時々見られる「ジャンプ」を防ぎます。停止イベントでは、これらの変更を元に戻します。私の場合、YMMVで動作します。

Answer 2

（私のニーズに合った）より簡単な解決策を見つけました。

jquery-ui.css 内で、目的の位置を設定し、!important を追加して、それが維持されるようにします。

.ui-resizable {position: fixed !important} /* fix jquery's position absolute on resizing */

Answer 3

このコードを使用して、ドラッグ中にスクロールせずに要素をウィンドウ スペース内に保持します。

$("#draggable").draggable({containment:"window", scroll: false})

Answer 4

Chrome Developer Toolsはstyle="position:relative"、ユーザーがドラッグ/サイズ変更している間、jQueryUIが属性を使用することを示しています。これ.demo{position:absolute}により、CSSのすべてが上書きされます。

回避策は、独自に設定しstyle="position:absolute"（これには、jQueryメソッドを使用できますcss()）、各divのtopとleftを明示的に設定します。

 $('.demo').css({position:"absolute"});

Answer 5

#container を に設定するだけposition: relative;です。http://jsfiddle.net/g7Cgg/1/