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 1

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.