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.