JQuery UI redimensionable no admite la posición: fijo; ¿Alguna recomendación?

Question

La función .resizable de JQuery UI no admite elementos position: fixed;. En el momento que intentas redimensionarlos, cambia su atributo de posición a absoluto. ¿Alguna solución recomendada?

Tengo algunas ventanas de chat que aparecen y se pueden arrastrar por el documento. Están colocados en posición para que no se desplacen con la página detrás de ellos. Todos funcionan perfectamente hasta que intentes redimensionar una ventana, es cuando pasa a position: absolute; y luego se queda atrás cuando la página se desplaza.

he intentado controlar el evento de cambio de tamaño de parada y el cambio de la posición fija a:

stop: function (event, ui) 
    { 
     $(chatWindow).css('position', 'fixed'); 
    } 

Esto no funciona porque el posicionamiento (top: y left:) no son correctas para el elemento fijo y cuando deje de cambiar el tamaño el elemento cambia a posicionamiento fijo y salta a lugares extraños en la página. A veces salta fuera de los límites de la página y se pierde para siempre.

¿Alguna sugerencia?

Answer 1

Para superar este problema envolví la .resizable() bloquear la() bloque .draggable:

<div id="draggable-dealie"> 
    <div id="resizable-dealie"> 
    </div> 
</div> 

los correspondientes JS:

$("#draggable-dealie").draggable(); 
$("#resizable-dealie").resizable(); 

y asegurarse de que tiene la propiedad position:fixed !important; establecida en el # draggable-dealie CSS:

#draggable-dealie { 
    position:fixed !important; 
    width:auto; 
    height:auto; 
} 

que tienen una demostración en: http://jsfiddle.net/smokinjoe/FfRRW/8/

Answer 2

No hay belleza, pero ¿qué tal si guardamos la posición (arriba y a la izquierda) en vars separados al comienzo del cambio de tamaño (creo que el método se llama "inicio")?

ACTUALIZACIÓN (Gracias por el comentario ... El evento se dispara demasiado tarde): Como JqueryUI genera un segundo objeto "ui" al hacer un objeto redimensionable le da a ese ui-objeto un campo: ui.originalPosition .. . Esa debe ser la posición del elemento fijo antes de que el cambio de tamaño ...

Answer 3

Aquí está la solución que se me ocurrió, que es un poco más código que me gustaría, pero corrige el problema:

$("#test").resizable({stop:function(e, ui) { 
    var pane = $(e.target); 
    var left = pane.attr("startLeft"); 
    var top = pane.attr("startTop"); 
    pane.css("position", "fixed"); 
    pane.css("top", top); 
    pane.css("left", left); 
}}); 
$("#test").draggable({create: function(e, ui) { 
    var pane = $(e.target); 
    var pos = pane.position(); 
    pane.attr("startLeft", pos.left + "px"); 
    pane.attr("startTop", pos.top + "px"); 
}, stop: function(e, ui) { 
    var pane = $(e.target); 
    pane.attr("startLeft", ui.position.left + "px"); 
    pane.attr("startTop", ui.position.top + "px"); 
}}); 

Almacena la posición superior y la izquierda en el elemento html (necesita xhtml doctype para que sea válida) y utiliza esa información para establecer la posición al final del evento de cambio de tamaño.

Answer 4

Tuve ese problema hoy, y odio las soluciones "antiestéticas" ... Así que decidí experimentar un poco para ver si no había una solución "mejor" ... y en algún momento tenido un presentimiento:

html:

<div class="fixed"></div> 

javascript (jquery):

$('.fixed').resizable(); 
$('.fixed').draggable(); 

css:

.fixed{ 
    position: fixed !important; 
} 

Jquery acaba de ser superado por CSS, ¡maldita sea!

Answer 5

Si, como yo, usted tiene un div fija en la parte inferior de la página, a continuación, puedes agregar importancia a estas reglas CSS para que se pegue en la parte inferior:

.fixed { 
    position: fixed !important; 
    top: auto !important; 
    bottom: 0 !important; 
    left: 0; 
    right: 0; 
} 

Y acaba de hacer se puede cambiar su tamaño por su borde norte:

$('.fixed').resizable({ 
    handles: "n" 
}); 

Answer 6

Esta es una solución sucia pero funciona para mí.

this.resizable({ 
    start:function (event, ui){ 
     x =ui.originalPosition.left+ $(ui.originalElement).parent().scrollLeft() 
     y = ui.originalPosition.top+ $(ui.originalElement).parent().scrollTop() 
    }, 
    resize:function (event, ui){ 
     $(ui.originalElement).css('left' , x); 
     $(ui.originalElement).css('top' , y); 
} 

Answer 7

simplemente forzar la posición: fijo en el elemento al cambiar el tamaño arranques y paradas al cambiar el tamaño.

$(".e").draggable().resizable({ 
    start: function(event, ui) { 
     $(".e").css("position", "fixed"); 
    }, 
    stop: function(event, ui) { 
     $(".e").css("position", "fixed"); 
    } 
}); 

jsFiddle: http://jsfiddle.net/5feKU/