Pessoal tenho uma aplicação que tem uma div
flutuante que o usuário pode arrastar dentro da tela, só que com o draggable()
do jquery ele deixa o usuário arrastar a div
além da tela e muita vezes ele não consegue trazer ela para o centro sem ter que resetar a aplicação, então eu queria limitar essa flutuação ao tamanho da tela do usuário porem estou tendo dificuldades
$(function () {
$(".window-float").draggable();
});
body{
background-color: #666666 !important;
}
#screen {
margin-top: 80px;
margin-left: auto;
margin-right: auto;
border-radius: 6px;
height: 400px;
width: 600px;
background-color: #ffffff;
}
#menubar {
height: 10%;
width: 100%;
background-color: #2A373A;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.mac-btn {
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
margin-top: 15.5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="screen" class="window-float">
<div id="menubar">
<div class="mac-btn" id="mac-btn-one"></div>
<div class="mac-btn" id="mac-btn-two"></div>
<div class="mac-btn" id="mac-btn-three"></div>
</div>
<div class="">
</div>
</div>