how to drag an object in a limited area without containment

Question

In the documentation, it says that one of the possible values for the containment property is an array defining the bounding box. So no container necessary.

Example: Live Copy (Note that the "guide" div is only there to show where the box is, it does not contain the bounded draggable)

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>Containment Example</title>
  <style>
    div {
      display: inline-block;
      border: 1px solid #aaa;
      box-sizing: border-box;
    }
    div.guide {
      position: absolute;
      border: 1px dotted black;
      left: 10px;
      top: 0px;
      width: 190px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="guide"></div>
  <div class="unbounded">I can go anywhere</div>
  <div class="bounded">I can only move around in the box
    <br>[10, 0] to [200, 200]</div>
  <script>
    $(".unbounded").draggable();
    $(".bounded").draggable({
      containment: [10, 0, 200, 200]
    });
  </script>
</body>
</html>