arrastando para fora do HTML do corpo / div / tudo

Question

i fazer uma classe de elementos arrastáveis ??como este

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

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

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

    }
});

Agora o problema é que eu sou capaz de arrastar os elementos fora do corpo, e em todo o html. como faço para limitar a área em que é arrastável?

Answer 1

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

Restringe arrastando para dentro dos limites do elemento ou região especificado. Os valores possíveis string: 'pai', 'documento', 'janela', [x1, y1, x2, y2]

.

Exemplo:

Inicializar um draggable com a opção de contenção especificada.

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

ou , caso o problema é que o arrastável pode ser colocado em todo o lugar:

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

Se definido como verdadeiro, o elemento retornará à sua posição inicial quando arrastar paradas. valores de string possíveis: 'válido', 'inválida'. Se definido como inválido, revert só ocorrerá se o draggable não foi abandonado em um droppable. Para válida, é o contrário.

E , finalmente, eu não vê-lo definindo o escopo da draggable ( Editar : Mas isso não vai resolver o seu problema, o outro 2 coisas acima deve) :

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

Usado para agrupar conjuntos de itens que podem ser arrastadas e droppable, além de droppable aceitar opção. A draggable com o mesmo valor escopo como um droppable serão aceitos pela droppable.

Exemplo:

Inicializar um draggable com a opção escopo especificado.

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