How to limit a div draggable from overtaking the corner of the screen?

Asked

Viewed 161 times

0

Guys I have an app that has a div floating that the user can drag inside the screen, only with the draggable() jquery lets the user drag the div beyond the screen and many times it fails to bring it to the center without having to reset the application, so I wanted to limit this fluctuation to the size of the user screen however I’m having difficulties

    $(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>

javascript jquery html5 css3

1 answer

1


Browser other questions tagged javascript jquery html5 css3

You are not signed in. Login or sign up in order to post.