How to prevent the page from scrolling when dragging an element?

Question

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

I made a search on the web and found this line of code. It was suppose to prevent scrolling.

$("body").css("overflow", "hidden")

All it does is to disappear scroll bar but you can drag the div out of the window size anyway.

Answer 1

Use the containment option:

$("#stayaway").draggable({containment: "window"})

Demo

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

Answer 2

Use Containment!!

$("#stayaway").draggable({containment: "window"})

Selector: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.

Check out this fiddle (you can change it to a 500 x 500 square)

http://jsfiddle.net/Kpt2K/11/