Currently, I am using jquery ui to adjust the size of a div container.
My goal is to restrict the resizing to a specific designated area.
containment:"parent"
After implementing the code, the drag operation adheres to the specified area boundaries.
However, the resizing functionality does not conform to the designated area.
https://i.sstatic.net/zQpN9.png
Despite my attempts, I am unable to resize only within the blue area.
Would appreciate insights on what could be going wrong here!
<html>
<head>
<style>
#main_container{
position : absolute;
top:50%;
left:50%;
width: 800px;
height: 500px;
margin-left:-400px;
margin-top:-250px;
border : solid 1px black;
display: flex;
flex-direction: column;
}
#control_container{
border : solid 1px black;
}
#object_container{
background-color : blue;
flex: 1;
border : solid 1px black;
}
#control_container > p, button {
float:left;
margin:0 5px 0 0;
}
#test, #test2
{
width : 100px;
height : 100px;
border : solid 1px black;
position : absolute;
background-color : red;
}
</style>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="main_container">
<div id="control_container">
<button>test</button>
<button>test</button>
<button>test</button>
<p>test</p>
<button>test</button>
<p>test</p>
<button>test</button>
</div>
<div id="object_container">
<div id="test"></div>
<div id="test2"></div>
</div>
</div>
<script>
$('#test').draggable({
containment:"parent",
});
$('#test').resizable({
containment:"parent",
handles: 'n, e, s, w, ne, se, sw, nw',
});
$('#test2').draggable({
containment:"parent",
});
$('#test2').resizable({
containment:"parent",
handles: 'n, e, s, w, ne, se, sw, nw',
});
</script>
</body>
</html>
In my project, I require the ability to resize multiple div elements,
These components need to have an absolute positioning.
Although dragging is confined within the designated area, resizing seems to ignore these limitations.