内部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

回答

相关问题