jquery draggable: how to limit the draggable area?

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 draggab

Answer 1

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" );