我要在父元素中拖动大小，不能超出父元素，resizable缩放第一个元素时，其他的元素总会被挤下去，把最后一个元素拖动到其他地方，缩放时又会跑到最下去，而且，缩放到最大不能占满父元素，我想要的是，不管拖动放大缩小哪个元素都可以把其他元素覆盖，缩放到最大，

<style>
.div-rows-col{
width: 55%;
height: 500px;
margin-left: 400px;
background-color: gray;
position: relative;
}
.row{
width: 100%;
margin-left: 0px;
margin-right: 0px;
z-index: 10;
position: absolute;
}
</style>
<div class="div-rows-col">
<div class="row" id="div5" style="display:block;">
<div class="col-xs-6 col-md-4 nav-lon" id="five" style="background: red;"></div>
<div class="col-xs-6 col-md-4 nav-lon" id="five" style="background: yellow;"></div>
<div class="col-xs-6 col-md-4 nav-lon" id="five" style="background: #000"></div>
<div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: green;"></div>
<div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: blue;"></div>
<div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: #FFFFFF"></div>
<div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: silver;"></div>
<div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: orange;"></div>
<div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: scrollbar;"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(function () { //预案拖动缩放
$(".nav-lon").draggable({
containment : ".div-rows-col",
zIndex:1000
});
$(".nav-lon").resizable({
containment: '.div-rows-col'
});
});
});
</script>