jquery draggable: how to limit the draggable area?

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?

Use the "containment" option:

jQuery UI API - Draggable Widget - 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.

$(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" });

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);
    },
});

See excerpt from official documentation for containment option:

> 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: > > > > $( ".selector" ).draggable({ > containment: "parent" > }); > > Get or set the containment option, after initialization: > > // Getter > var containment = $( ".selector" ).draggable( "option", "containment" ); > // Setter > $( ".selector" ).draggable( "option", "containment", "parent" );

$(function () {
    $( ".droppable-area" ).sortable({
				connectWith: ".connected-sortable",
				containment: ".droppable-area", //(parent div)
				stack: '.connected-sortable div'
			}).disableSelection();
});