¿Cómo configuro la contención en un cuadro de diálogo de jQuery UI?

¿Es posible agregar contención (que limita al límite de otro elemento) a jQuery UI's Dialog?¿Cómo configuro la contención en un cuadro de diálogo de jQuery UI?

Fuente

2010-05-25 PPPHP

Por contención que quiere decir ....? No estoy seguro de lo que estás buscando aquí, aclara un poco? –

Bueno, quiero decir que quiero especificar el área donde se puede arrastrar el diálogo. Ahora se puede arrastrar por toda la ventana del navegador. – PPPHP

Puede orientar el cuadro de diálogo y aplicarle una contención. Prueba esto:

var container = $('.dialog-container'), 
    dialog = $('.ui-dialog'); 
// get container top left corner locations 
var cx1 = container.offset().left, 
    cy1 = container.offset().top; 
// get dialog size 
var dw = dialog.outerWidth(), 
    dh = dialog.outerHeight(); 
// get container bottom right location, then subtract the dialog size 
var cx2 = container.width() + cx1 - dw, 
    cy2 = container.height() + cy1 - dh; 
dialog.draggable("option", "containment", [cx1, cy1, cx2, cy2]);

Edición: He definido a demo para usted.
Edit2: Se ha cambiado el uso de diálogo outerWidth & outerHeight

Fuente

2010-05-25 11:59:53 Mottie

Hola muchas gracias !!!! – PPPHP

El problema con esto es si cambia el tamaño de la ventana gráfica luego la funcionalidad se rompe ... –

@Lee: eso se soluciona fácilmente, consulte mi respuesta. – Mac

@ Mottie de en el camino correcto, pero no hay una solución más sencilla y mejor:

var container = $('.dialog-container'), 
    dialog = $('.ui-dialog'); 
dialog.draggable("option", "containment", container);

A diferencia de la solución de Mottie, esto no se romperá si la ventana cambia de tamaño. He bifurcado el JSFiddle here.

Fuente

2013-04-09 06:21:21 Mac

+1 Esto fue útil. Además, vale la pena señalar que el 'contenedor' no necesita ser el padre del elemento' dialog'. Podría ser cualquier elemento al que desee restringir el movimiento del diálogo. – Nikhil

@Nikhil: sí, eso definitivamente vale la pena mencionar. Gracias por agregar eso! – Mac

También necesita [establecer la contención para el widget 'resizable'] (https://stackoverflow.com/a/44401699/616460), o aún podrá cruzar los límites cuando cambie el tamaño. –

@ Mac está en el camino correcto, pero la solución no está completa. Usted debe también establece la contención del widget Resizable del diálogo. Si solo configura el Arrastrable, obtendrá contención cuando arrastre, pero cuando agarre los bordes y cambie el tamaño, seguirá saliendo de los límites.

Por lo que usted quiere hacer esto, suponiendo #mydialog es el elemento que creó inicialmente el diálogo desde y #boundary es el elemento que se desea limitarlo a (por cierto, el parámetro contenedor puede ser también un selector) :

let ui = $('#mydialog').closest('.ui-dialog');  // get parent frame 
ui.draggable('option', 'containment', '#boundary'); // <-- drag, but not resize 
ui.resizable('option', 'containment', '#boundary'); // <-- don't forget!!!

He aquí un fragmento de ejemplo, alternar las casillas de verificación para cambiar el confinamiento del widget correspondiente entre 'document' (por defecto), y '#area'. Luego, experimente ambos arrastrando el diálogo por su barra de título, y, cambiándolo por sus bordes. Tenga en cuenta lo que sucede cuando sólo se selecciona "CONFINE arrastre":

// Create dialog from #win with mostly default options. 
 
$('#win').dialog({ 
 
    width: 200, 
 
    height: 150, 
 
    position: { my: 'center', at: 'center', of: '#area' } 
 
}); 
 

 
// When checkbox changed, update confinement settings. 
 
$('#draggable, #resizable').change(function() { 
 
    let d = $('#draggable').prop('checked'); 
 
    let r = $('#resizable').prop('checked'); 
 
    let ui = $('#win').closest('.ui-dialog'); 
 
    ui.draggable('option', 'containment', d ? '#area' : 'document'); 
 
    ui.resizable('option', 'containment', r ? '#area' : 'document'); 
 
});

#area { 
 
    position: relative; 
 
    left: 2ex; 
 
    top: 2ex; 
 
    width: 400px; 
 
    height: 300px; 
 
    border: 1px solid red; 
 
} 
 

 
#win { 
 
    font-size: 10pt; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
label { 
 
    display: flex; 
 
    align-items: center; 
 
}

<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div>Example</div> 
 
    <div id="area"></div> 
 
    <div id="win" title="test"> 
 
    <label><input type="checkbox" id="draggable">Contain drag</label> 
 
    <label><input type="checkbox" id="resizable">Contain resize</label> 
 
    </div> 
 
</body>

Fuente

2017-06-07 00:31:28

¿Cómo configuro la contención en un cuadro de diálogo de jQuery UI?

Respuesta

Cuestiones relacionadas