I have a draggable div. I want it to be only draggable within the size of my screen. But now anyone can drag it and make it go out of the boundaries.
My draggable div:
$("#stayaway").draggable()
$("body").css("overflow", "hidden")
Use the containment
option:
$("#stayaway").draggable({containment: "window"})
$("#stayaway").draggable({containment: "window"})
#stayaway {
width: 200px;
height: 200px;
background-color: silver;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="stayaway"></div>