jQuery - 可调整大小+可拖动，未添加滚动(左，上)

Question

我在拖动和调整大小的框时遇到问题。它工作正常，拖动和调整大小都很好，但我有一个容器来容纳这些元素，一旦我触发溢出并尝试调整 div 大小，它就会失败并重置回容器宽度。 http://jsfiddle.net/JTTYM/26/

<小时/>

更新::好吧，也许我描述的问题是错误的，请转到此网址:http://jsfiddle.net/JTTYM/52并滚动找到绿色框，然后尝试调整其大小。一旦调整大小，溢出滚动条就会消失。如上所述，溢出值不计入调整大小

Answer 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>