Pulling from html body / div / all
I am creating a class of elements that can be dragged like
jQuery(".drag").draggable();
jQuery(".drop").droppable({
accept: ".drag",
drop: function(ev, ui) {
//do stuff with dropped data
}
});
now the problem is that i can pull elements from the body and all over the html. how to constrain the area in which it is dragged?
source to share
http://docs.jquery.com/UI/Draggable#option-containment
Drag and drop constants within the specified element or region. Possible string values: "parent", "document", "window", [x1, y1, x2, y2].
Example:
Initialize draggable with the specified security option.
$('.selector').draggable({ containment: 'parent' });
Or , if the problem is that the dragged object 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 original position when dragged. Possible string values: 'valid', 'invalid'. If set to invalid, return will only be executed if draggable was not dropped to droppable. Indeed, it is the other way around.
And finally, I can't see how you customize the drag area ( Edit ). But that won't solve your problem, the other 2 things above should):
http://docs.jquery.com/UI/Draggable#option-scope
Used to group sets of drop and drop items, in addition to droppable accept options. Dragged with the same region value as droppable will be accepted as droppable.
Example:
Initialize draggable with the specified region parameter.
$('.selector').draggable({ scope: 'tasks' });
source to share