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>

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

Demo

Sign up