jQuery - 可調整大小+可拖動，不添加滾動（左側，頂部）

我有一個拖動和可調整大小框的問題。它工作正常，拖拽和rezises罰款，但我有一個容器，持有這些元素，一旦我觸發溢出，並嘗試rezise它的div失敗，並重置後面的容器寬度。 http://jsfiddle.net/JTTYM/26/jQuery - 可調整大小+可拖動，不添加滾動（左側，頂部）

preview

更新::好吧，也許我描述問題錯了，去這個網址：http://jsfiddle.net/JTTYM/52和滾動查找綠框，然後嘗試調整它。調整大小後，溢出滾動條消失。如上所述，這就像溢出值不計入調整大小

來源

2012-05-31 Kivylius

我無法重現你的問題。如果我將綠框拖到角落，沒有溢出，然後調整它的大小，就像在第一張圖像中顯示的那樣，即使在紅框外也可以正確調整大小 – Alvaro

好吧，也許我在描述問題錯誤，請轉到此網址： http://jsfiddle.net/JTTYM/52/並滾動找到綠色框，然後嘗試調整它的大小。調整大小後，溢出滾動條消失。如上所述，這就像溢出值不計入調整大小。 – Kivylius

這是從你.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-04 13:40:44 zessx

這樣一個愚蠢的錯誤，謝謝你，我一直在思考一段時間思考它的jQuery的問題。再一次感謝你。享受+50;） – Kivylius

您必須應用約束運動。檢查here

編輯：現場演示：http://jsfiddle.net/JTTYM/51/

來源

2012-07-16 10:55:00

你可以採取這個http://jsfiddle.net/JTTYM/26/並修復它，以便在紅色容器外面的內部綠色框（溢出滾動）例如：將其拖放到一邊，但是當它重新調整它時不會殺死溢出位置。然後我會給你點你的答案:) – Kivylius

我編輯它，檢查它在這裏：http://jsfiddle.net/JTTYM/51/ –

jQuery - 可調整大小+可拖動，不添加滾動（左側，頂部）

回答

相關問題