Question

i make a class of elements draggable like this

jQuery(".drag").draggable();

jQuery(".drop").droppable({
accept: ".drag",

drop: function(ev, ui) {
//do stuff with dropped data

    }
});

now the problem is, i am able to drag the elements out of body, and all over the html. how do i limit the area in which it is draggable?

Answer 1

http://docs.jquery.com/UI/Draggable#option-containment

Constrains dragging to within the bounds of the specified element or region. Possible string values: ‘parent’, ‘document’, ‘window’, [x1, y1, x2, y2].

Example:

Initialize a draggable with the containment option specified.

$('.selector').draggable({ containment: 'parent' });

Or in case the problem is that the draggable can be placed all over the place:

http://docs.jquery.com/UI/Draggable#option-revert

If set to true, the element will return to its start position when dragging stops. Possible string values: ‘valid’, ‘invalid’. If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it’s the other way around.

And finally, I don’t see you setting the scope of the draggable (Edit: But that won’t fix your problem, the other 2 things above should):

http://docs.jquery.com/UI/Draggable#option-scope

Used to group sets of draggable and droppable items, in addition to droppable’s accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.

Example:

Initialize a draggable with the scope option specified.

$('.selector').draggable({ scope: 'tasks' });