3

ドラッグおよびサイズ変更可能なボックスに問題があります。それは正常に動作し、ドラッグとリサイズは正常に行われますが、これらの要素を保持するコンテナーがあり、オーバーフローをトリガーして div をリサイズしようとすると、失敗してコンテナーの幅にリセットされます。http://jsfiddle.net/JTTYM/26/

プレビュー

更新:: OK、問題の説明が間違っている可能性があります。この URL: http://jsfiddle.net/JTTYM/52に移動し、スクロールして緑色のボックスを見つけ、サイズを変更してみてください。サイズを変更すると、オーバーフロー スクロール バーが消えます。上記のように、オーバーフロー値がサイズ変更でカウントされないようです

4

2 に答える 2

1

これはあなたの.layer { position: absolute; }.

絶対位置を使用している場合は、常に親に相対位置を設定することを忘れないでください。そうしないと、多くの問題が発生します。

あなたの場合、この CSS を追加するだけです:

.layers_group {
   position: relative;   
}

例：

$(function() {
    $(".live_resizable").resizable();
    $(".live_draggable").draggable();
});
.main {    
    position:absolute;
    right:25px;
    left: 25px;
    top: 25px;
    bottom: 25px; /*200*/
    overflow:auto;
    border:2px solid red;
}
.layers_group {
   position: relative;   
}
#stuff {
    width: 600px;
}
.layer {    
    background-color: green;
    width: 100px; 
    height: 100px; 
    top: 900px; 
    left: 900px;
    cursor:move;
}

/* Jquery to add hangles i think */
.ui-resizable { position: absolute;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block;  }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; background:url(images/corner.gif); }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<div class="main">
    <div id="stuff">
        <div class="layers_group aaasdasd">
            <div class="live_draggable live_resizable layer"></div>
        </div>
    </div>
</div>

于 2012-09-04T13:40:44.583 に答える
0

拘束移動を適用する必要があります。ここで確認してください

編集: ライブデモ: http://jsfiddle.net/JTTYM/51/

于 2012-07-16T10:55:00.067 に答える