內部div應該始終保持在外部div

我有一個div（外部div;這就是我命名它）。它現在包含一個旁邊（如內部div）。我試圖讓這一邊留在外面的div永遠。內部div應該始終保持在外部div

現在讓我給你介紹一下我的旁白：

1）它是可拖動（顯然） 2）放大/縮小。

我想確保旁邊總是留在外面的div裏面，即使我們拖拽/放大到任何程度。這是有點這樣工作。但是在放大時留下了外部div的邊界。

我該如何防止這種情況發生？

僅供參考，我不是一個CSS傢伙。 PS：如果我把它改成另一個div（讓我們把它命名爲內部div），div就會失去它的拖拽能力。這在鄉村是很重要的。

幫助？格拉西亞斯。

HTML：

<div style="position:relative;background-color:#ffff99;"> 
<aside draggable="true" id="dragme" class="imgContent"> 
    This is an aside, drag me. 
</aside>  
This is the parent div. 
<br> 
This is the parent div. 
This is the parent div. 
<br> 
The aside should always stay inside this div. 
<br> 
I am trying to make sure that the aside won't zoom more than the outer div's boundary. 
<br> 
What should be done to acheive that? 
</div>

CSS：

aside { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 200px; 
    background: rgba(255,255,255,0.66); 
    border: 2px solid rgba(0,0,0,0.5); 
    border-radius: 4px; padding: 8px; 
} 

.imgContent 
{ width:120px; height:75px; resize:both; overflow:hidden; background-color:#ffff99; padding:5px;}

Fiddle

來源

2015-04-28 Annabelle

你正在嘗試的是'css：resize'，所以外部元素不會調整大小，而不管內部元素是什麼。看到這個例子：https：//developer.mozilla.org/samples/cssref/resize.html – Pawan

也許你可以像這樣捕獲它http://stackoverflow.com/questions/8572635/is-it-possible-to- catch-resize-event-when-user-resizes-text-input-defined-resiza但它不會是一個好的用戶體驗 – Pawan

留在父DIV中只需添加overflow:hidden;父DIV。要調整旁邊的位置和/或大小不要溢出父div，你必須使用javascript處理mouseup/mousemove事件。

來源

2015-04-28 06:43:57

內部div應該始終保持在外部div

回答

相關問題