3

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

预览

更新:: 好的，也许我描述的问题是错误的，转到这个网址：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 回答