arrastrando fuera del cuerpo html / div / todo

Question

hago una clase de elementos arrastrables como esta

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

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

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

    }
});

ahora el problema es que soy capaz de arrastrar los elementos fuera del cuerpo y por todo el html. ¿Cómo limito el área en la que se puede arrastrar?

Answer 1

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

Restringe el arrastre dentro de los límites del elemento o región especificados. Valores de cadena posibles: 'padre', 'documento', 'ventana', [x1, y1, x2, y2].

Ejemplo:

Inicialice un elemento arrastrable con la opción de contención especificada.

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

O en caso de que el problema sea que el elemento arrastrable se puede colocar por todas partes:

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

Si se establece en verdadero, el elemento volverá a su posición inicial cuando se detiene el arrastre. Valores de cadena posibles: 'válido', 'inválido'. Si se establece como no válido, la reversión solo ocurrirá si el elemento arrastrable no se ha soltado en un droppable. Para válido, es al revés.

Y finalmente, no te veo configurando el alcance del arrastrable ( Editar : Pero eso no solucionará tu problema, los otros 2 las cosas anteriores deberían) :

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

Se utiliza para agrupar conjuntos de elementos arrastrables y soltables, además de la opción de aceptación de soltable. Un elemento arrastrable con el mismo valor de alcance que un droppable será aceptado por el droppable.

Ejemplo:

Inicialice un elemento arrastrable con la opción de alcance especificada.

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