dragging out of html body/div/everything

hi 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?

From stackoverflow

• 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' });
  

  mark : adding containment:'parent', option fixed the problem! thanks a lot!