Внутренний div должен всегда оставаться внутри внешнего div

Question

У меня есть div (внешний div, это то, что я назвал его). Теперь он содержит сторону (например, внутренний div). Я стараюсь всегда делать это в стороне от внешнего div.

Теперь позвольте мне дать вам описание о моей стороне:

1) Это перетаскиваемым (Очевидно) 2) Увеличить/Уменьшить.

Я стараюсь, чтобы сторона всегда оставалась внутри внешнего div, даже если мы перетаскиваем ее в любом направлении. Это как-то так. Но в сторону при масштабировании выходит граница внешнего div.

Как я могу предотвратить это?

FYI, я не парень CSS.

PS: Если я изменил это в сторону другого div (давайте назовем его внутренним div), div теряет способность к перетаскиванию. Это очень важно в сельской местности.

Помощь? Gracias.

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, вам нужно обрабатывать события mouseup/mousemove с помощью javascript.