jQuery - Ziehen/im Ansichtsfenster bleiben

Question

Hier ist eine kurze Erklärung meines Problems:
Bevor ich mein Element ziehe, bleibt es in seiner Position, nachdem ich die Größe des Fensters geändert habe. Aber wenn ich anfange, es herumzuziehen, dann versuche das Fenster wieder zu vergrößern, es bleibt nicht in seinem Container.

Hier ist eine Fiddle, um mein Problem zu demonstrieren.
Hier ist mein Code so weit:

$(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: 32px; 
 
    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>

Ist es möglich, dieses Element zu erhalten seinem Behälter zu folgen, nachdem die Größe des Ansichtsfensters zu ändern (das heißt Containment nach einem Fenster Resize erhalten)?

Answer 1

einen Reload nach jedem Fenster hinzufügen

$(window).resize(function(){ 
    location.reload(); 
}); 

Demo Größe ändern:

$(".MENU").draggable({ 
 
    containment: ".MENU-CONTAINER", 
 
    snap: ".MENU-CONTAINER", 
 
    snapMode: "inner", 
 
    snapTolerance: "16", 
 
    scroll: false 
 
}); 
 

 
$(window).resize(function(){ 
 
    location.reload(); 
 
});

* {box-sizing: border-box;} 
 

 
body {background: hsla(0, 0%, 100%, 1.00);} 
 

 
.MAIN { 
 
    padding-top: 32px; 
 
    padding-left: 32px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.MENU-CONTAINER { 
 
    position: fixed; 
 
    width: calc(100% - 64px); 
 
    height: calc(100vh - 64px); 
 
    border: 1px solid blue; 
 
} 
 

 
.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>