Question: I have a draggable object (div), and some droppable ones (table TD's). I want the user to drag my draggable object to one of those droppable TD's.

I enable draggable and droppable this way:

```
$(".draggable").draggable();
$(".droppable").droppable();

```

The problem is that with this the user can drag the div anywhere on the screen, including out of the droppable area.

How can I limit the boundary area for the draggable object?

Answer: 
Use the "containment" option:

[jQuery UI API - Draggable Widget - containment](https://api.jqueryui.com/draggable/#option-containment)

The documentation says it only accepts the values: `'parent'`, `'document'`, `'window'`, `[x1, y1, x2, y2]` but I seem to remember it will accept a selector such as '#container' too.
Here is a code example to follow. #thumbnail is a DIV parent of the #handle DIV

```
buildDraggable = function() {
    $( "#handle" ).draggable({
    containment: '#thumbnail',
    drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;

        ICZoom.panImage(top, left);
    },
});

```