jquery draggable: how to limit the draggable area?

Question

Hi,

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?

Thanks

Answer 1

watch this : http://jqueryui.com/demos/draggable/#handle

Answer 2

Use the "containment" option:

http://docs.jquery.com/UI/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.