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: 
```
$(function() { $( "#draggable" ).draggable({ containment: "window" }); });

```

of this code does not display.
Full code and Demo:
<http://www.limitsizbilgi.com/div-tasima-surukle-birak-div-drag-and-drop-jquery.html>

In order to limit the element inside its parent:

```
$( "#draggable" ).draggable({ containment: "window" });

```
See excerpt from official documentation for [`containment` option](https://api.jqueryui.com/draggable/#option-containment):

> 
> containment
> -----------
> 
> 
> **Default:** `false` 
> 
> 
> Constrains dragging to within the bounds of the specified
>  element or region.  
> 
> **Multiple types supported:**
> 
> 
> * **Selector**: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.
> * **Element**: The draggable element will be contained to the bounding box of this element.
> * **String**: Possible values: `"parent"`, `"document"`, `"window"`.
> * **Array**: An array defining a bounding box in the form `[ x1, y1, x2, y2 ]`.
> 
> 
> **Code examples:**  
> 
>  Initialize the draggable with the `containment` option specified:
> 
> 
> 
> ```javascript
> $( ".selector" ).draggable({
>     containment: "parent" 
> }); 
> 
> ```
> 
> Get or set the `containment` option, after initialization:
> 
> 
> 
> ```javascript
> // Getter
> var containment = $( ".selector" ).draggable( "option", "containment" );
> // Setter
> $( ".selector" ).draggable( "option", "containment", "parent" );
> 
> ```
> 
>