jQuery UI cómo configurar la opción de contención arrastrable en el padre primario

Question

La interacción de JQuery UI Draggable tiene una buena propiedad para setting the containment como padre.

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

Deseo establecer la contención como el elemento primario del elemento primario. No hay ningún valor de cadena para lograr esto, como cadena, las opciones son

'padre', 'documento', 'ventana', [x1, y1, x2, y2]

que podría calcular x1, y1, x2, y2 del padre del padre en la carga de la página y usa esos valores para establecer los límites de un contenedor en relación con el documento. Pero la posición del contenedor puede cambiar en relación con la posición principal de los padres si la ventana se redimensiona después de la carga de la página. La opción 'principal' nativa mantiene el elemento arrastrable dentro del elemento padre independientemente del cambio de tamaño de la ventana.

¿Hay alguna forma de lograr esta contención arrastrable utilizando el elemento primario del elemento primario? .

Answer 1

Según el documentation, la opción containment también puede ser un selector de jquery o un elemento real. Así que usted puede hacer esto:

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

O mejor aún:

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

Answer 2

De acuerdo con los documentos, no lo hace tienen que pase en una cadena para la propiedad containment. Puede pasar en cualquiera de:

Selector, Element, String, Array 

Por lo tanto, sólo tiene que seleccionar el padre del padre con jQuery (es decir $(".selector").parent().parent()), y pasan en lugar de 'parent'.

Answer 3

Esto funciona bien, así:

$('.selector').draggable({ 
    containment: "#parent", 
    scroll: false 
});