How to stop Div Moving out of the border Jquery draggable();

Question

How to stop the div from moving out of the border div

Here is the code i got so far.

  <script>
 $(document).ready(function() {
 $("#draggable").draggable({ grid: [50, 20] });
  });
  </script>
  <div id="drag_border">
  <div id="draggable" style="width:500; height:800">Drag me</div>
  </div>

Thank you,

Answer 1

You need to use containment. E.g.

$("#draggable").draggable({
  grid: [50, 20],
  containment: 'parent'
});

Edit:

Here's an example.

Remember, you're using a grid, so you won't reach the edges unless you calculate the width and height of your box to match that grid.