Question

我有一个div（外部div;那是我命名的）。它现在包含一个旁边（就像一个内部div）。我试图把它留在外面的div里面。

现在让我给你一个关于我的理由的描述：

1）它可以拖动（显然） 2）放大/缩小。

我正在尝试确保旁边始终保持在外部div中，即使我们将其拖动/缩放到任何程度。它有点像这样工作。但是，放大后的一边会留下外部div的边界。

如何防止这种情况发生？

仅供参考，我不是一个CSS小伙伴。

PS：如果我把它改成另一个div（让它命名为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

Answer 1

要保留在父div中，只需将overflow:hidden;添加到父div即可。要调整位置和/或大小，不要溢出父div，你必须使用javascript处理mouseup / mousemove事件。

内部div应始终保持在外部div内

1 个答案: