I have 2 divs with a jquery resizable and draggable feature and they work fine. My question is how can I make the 2 divs overlap each other when they are in use. To elaborate right now frame 2 is always on top of frame 1 how can I make frame 1 on top of frame 2 when I drag it over it and frame 2 on top of frame 1 when it's dragged over. Is this possible? Something like on active state. Any help is appreciated. Thanks in advance.
jQuery($ => {
let $framewrap1 = $('.framewrap1');
$framewrap1
.resizable({
handles: 'n, e, s, w, sw, se, nw, ne'
})
.draggable({
});
});
jQuery($ => {
let $framewrap2 = $('.framewrap2');
$framewrap2
.resizable({
handles: 'n, e, s, w, sw, se, nw, ne'
})
.draggable({
});
});.framewrap1 {
background-color: green;
width: 150px;
height: 150px;
position: absolute;
right: 0%
}
.framewrap2 {
background-color: brown;
width: 150px;
height: 150px;
position: absolute;
left: 20%
}<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<div class="framewrap1" id="framewrap1">
</div>
<div class="framewrap2" id="framewrap1">
</div>