2011-07-14 26 views
12

Uso del cuadro de diálogo de la interfaz de usuario de jQuery.jQuery UI Diálogo/Pregunta de arrastre

Funciona muy bien, pero actualmente, cuando arrastro un diálogo, no se moverá de la pantalla (todo el diálogo está siempre en la ventana gráfica).

¿Hay alguna manera de configurar el diálogo para que pueda arrastrarlo parcialmente fuera de la pantalla?

+0

¿Por qué quieres moverte parcialmente fuera de la pantalla? –

+7

@ViswanathanIyer: A veces es necesario alejarlo un poco para ver algo debajo de él. Estoy seguro de que hay otros motivos, pero la pregunta es ** ¿Cómo? **, no por qué. –

+0

@ViswanathanIyer: cubren el área principal, pero contienen herramientas para realizar cambios en esa área, por lo que el usuario abre el cuadro de diálogo, realiza algunos ajustes y luego lo arrastra para ver los cambios. En este momento, tendrían que CERRARLO, luego volver a abrirlo. – OneNerd

Respuesta

10

Claro que se puede si se amplía el código de diálogo jQuery Apenas incluya este código:

$.ui.dialog.prototype._makeDraggable = function() { 
    this.uiDialog.draggable({ 
     containment: false 
    }); 
}; 

se anulará el valor de contención por defecto de 'documento 'con false que desactiva la contención.

+0

Gracias - Voy a jugar con esto y ver qué puedo hacer. – OneNerd

+0

Estoy tratando de implementar esta solución, pero hasta ahora no tuve suerte. Lo estoy cargando en mi archivo script.js FUERA de docready. (dentro de docready tampoco funcionó). Esto parece un cambio global. ¿Debo relacionarlo de alguna manera con cada diálogo? – CoryDorning

+0

sin tener en cuenta ... funciona bien. – CoryDorning

2

Juega con la opción, posición. Escriba sus propias llamadas javascript para mover el cuadro.

$('#dialog').dialog('option','position',[500, 100]); 

pero no se puede mover la caja fuera de la vista del puerto, si usted quiere tener tal característica, escriba su propia, ampliando el diálogo jQuery UI, (Actualizar el bloque de código en el que comprueba si hay una posición válida . (válido si la posición x, y son en la vista)

3

Tuve el mismo problema e iba a utilizar betamax's solution, pero noté que efectivamente reemplaza algunas de las funcionalidades integradas de jQuery UI. Así que en vez adaptado el enfoque de mantener el construido en la funcionalidad, sino también a su vez la contención fuera reemplazando _makeDraggable en lugar de sólo pura y simple sustitución por:

if (!$.ui.dialog.prototype._makeDraggableBase) { 
    $.ui.dialog.prototype._makeDraggableBase = $.ui.dialog.prototype._makeDraggable; 
    $.ui.dialog.prototype._makeDraggable = function() { 
     this._makeDraggableBase(); 
     this.uiDialog.draggable("option", "containment", false); 
    }; 
} 
16

O puede hacerlo de una manera "jQuery" más simple y más;)

 
$(document).ready(function(){ 
    $('#dialog'). 
    dialog({ 
     //your dialog options go here 
    }). 
    dialog("widget").draggable("option","containment","none"); //this chained sequence kills containment 
}); 
+1

eres el hombre! Necesitaba restringir un diálogo a un div específico (cambiado "ninguno" a "#mydiv"). esta es la solución. –

+3

gracias ... +1 por "más jQuery way". – Aries

Cuestiones relacionadas