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>