jQuery - 可调整大小+可拖动，不添加滚动（左，上）

Question

我有拖动和调整大小的框的问题。它运行正常，拖动和rezises很好，但我有一个容器，可以容纳这些元素，一旦我触发溢出并尝试重新调整它失败并重置为容器宽度。 http://jsfiddle.net/JTTYM/26/

---

UPDATE ::好吧，也许我正在描述问题错误，请转到此网址：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> 

Answer 2

您必须应用约束移动。检查here

编辑： 现场演示：http://jsfiddle.net/JTTYM/51/