My issue is that when I resize the window, the element stays in its position until I start dragging it. Once I drag it and then resize the window again, it doesn't stay within its container.
To better illustrate my problem, you can view a demo on Fiddle. Here is the code snippet:
$(document).ready(function() {
$(".MENU").draggable({
containment: ".MENU-CONTAINER",
snap: ".MENU-CONTAINER",
snapMode: "inner",
snapTolerance: "16",
scroll: false
});
});* {
box-sizing: border-box;
}
body {
background: hsla(0, 0%, 100%, 1.00);
}
.MAIN {
padding-top: 32px;
padding-left: 64px;
width: 100%;
height: 100%;
}
.MENU-CONTAINER {
position: fixed;
width: calc(100% - 64px);
height: calc(100vh - 64px);
background-color: hsla(120, 100%, 25%, 0.3);
}
.MENU {
position: fixed;
bottom: 32px;
right: 32px;
width: 128px;
height: 64px;
background: hsla(0, 0%, 0%, 1.00);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="MAIN">
<div class="MENU-CONTAINER">
<div class="MENU"></div>
</div>
</div>My question is, how can I ensure that this element remains contained within its container even after resizing the viewport?