3

私は3つの部門を持っています。もう一方の内側。

jQuery

    $(function() {
        $("#div1").resizable({
            handles: "n, e, s, w, nw, ne, sw,se"
        });
        $("#div1").draggable();
    });

HTML

<div id="div1" style="left: 2px; top: 2px; z-index: 2; width: 100px; height: 70px; background-color: black">
    <div id="div2" style="width: 100%; height: 100%; background-color: green; position: absolute;">
        <div id="div3" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);">
            text
        </div>
    </div>
</div>

CSS

.ui-resizable-handle { width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; }
.ui-resizable-n { top: 1px; left: 50%; }
.ui-resizable-e { right: 1px; top: 50%; }
.ui-resizable-s { bottom: 1px; left: 50%; }
.ui-resizable-w { left: 1px; top: 50%; }
.ui-resizable-nw { left: 1px; top: 1px; }
.ui-resizable-ne { top: 1px; right: 1px; }
.ui-resizable-sw { bottom: 1px; left: 1px; }

ご覧のとおり、div1 はサイズ変更可能で、ドラッグ可能で、絶対的な幅と高さがあります。Div2 の幅と高さは 100% で、絶対位置があります。Div3 には、水平方向と垂直方向の中央に配置するパラメータがあります。

やりたいことのスクリーンショットがあります。スクリーンショットに示すように、白いハンドルを div の外側に配置します。2 番目の div は position:absolute のままにする必要があります。現在のコードを含むjsfiddleもあります。

ハンドルをdivの外に移動するのを手伝ってください。

4

2 に答える 2

3

あなたの質問を理解しているかどうかわかりません。

しかし、Fiddleがあります。

私はあなたのcss.

于 2013-05-17T13:32:56.647 に答える