jQuery UI Posición para establecer "derecha" e "inferior" en lugar de "izquierda" y "arriba"

Question

OK, esta es mi pregunta. Utilizando la posición de jQuery UI. Es posible posicionar un elemento en relación con otro elemento en la pantalla. Establece las propiedades de css izquierda y superior en el elemento que se posiciona y lo posiciona en la pantalla.

Lo que quiero hacer es, en lugar de configurar la izquierda y la parte superior, es posible que coloque derecha e inferior, de modo que si el elemento posicionado crece o se contrae, se encogerá en la dirección correcta.

Déjame entrar en detalles. Ok, lo que quiero es si un elemento está posicionado de la manera correcta, entonces quiero establecer la propiedad css right en lugar del left y si un elemento está posicionado en su parte inferior, entonces quiero establecer bottom en lugar de top. Puedo hacer esto usando la propiedad using de jQuery UI Position, pero tengo problemas con la detección de colisiones. Si la detección de colisiones está configurada en flip y el elemento se voltea, quiero detectar esto y averiguar si necesito configurar right en lugar de left y bottom en lugar de top. Mira el código a continuación para tener una mejor idea de lo que estoy tratando de hacer.

$('#somediv').position({ 
    my: 'right bottom', 
    at: 'right top', 
    of: $('#someotherdiv'), 
    offset: '0 5', 
    collision: 'flip flip', 
    using: function(pos) { 

     // Figure out the right and bottom css properties 
     var right = $(window).width() - pos.left - $(this).outerWidth(true); 
     var bottom = $(window).height() - pos.top - $(this).outerHeight(true); 

     // Position the element so that right and bottom are set. 
     $(this).css({left: '', right: right, top: '', bottom: bottom}); 
    } 
}); 

Funciona muy bien, excepto cuando el div se voltea desde la detección de colisiones. Si se voltea horizontalmente, quiero configurar left en lugar de right y si se voltea verticalmente, quiero establecer top en lugar de bottom.

La solución ideal sería si hubiera una manera de saber (en la función using) si el elemento se volteó y en qué direcciones. Entonces, ¿alguien tiene alguna idea para averiguar si un elemento fue volteado usando la detección de colisión?

Answer 1

OK, lo descubrí ... Aquí está mi intento de explicar cómo lo hice funcionar. Lo que tiene que hacer es volver a llamar a la posición dentro de la función using. Llámalo una vez sin detección de colisión y una vez con detección de colisión. Si la posición cambia, entonces fue volteada. Aquí hay un código de ejemplo con comentarios.

$('#somediv').position({ 
    my: 'right bottom', 
    at: 'right top', 
    of: $('#someotherdiv'), 
    offset: '0 5', 
    collision: 'flip flip', 
    using: function (pos1) { 

     // OK, we got a position once inside the pos1 variable, 
     // let's position it again this time without collision detection. 
     $(this).position({ 
      my: 'right bottom', 
      at: 'right top', 
      of: $('#someotherdiv'), 
      offset: '0 5', 
      collision: 'none none', 
      using: function(pos2) { 
       var hpos = 'right'; 
       var vpos = 'bottom'; 

       // Check to see if it was flipped horizontal 
       if (pos1.left != pos2.left) { 
        /* It was flipped horizontally so position is now 
         my: 'left bottom', 
         at: 'left top' 
        */ 
        hpos = 'left'; 
       } 

       // Check to see if it was flipped vertical 
       if (pos1.top != pos2.top) { 
        /* It was flipped vertically */ 
        vpos = 'top'; 
       } 

       // Figure out the right and bottom css properties 
       var right = $(window).width() - pos1.left - $(this).outerWidth(true); 
       var bottom = $(window).height() - pos1.top - $(this).outerHeight(true); 

       // Set the horizontal position 
       if (hpos == 'right') { 
        $(this).css({left: '', right: right}); 
       } else { 
        $(this).css({left: pos1.left, right: ''}); 
       } 

       // Set the vertical position 
       if (vpos == 'bottom') { 
        $(this).css({top: '', bottom: bottom}); 
       } else { 
        $(this).css({top: pos1.top, bottom: ''}); 
       } 
      } 
     }); 
    } 
}); 

Si alguien tiene una idea más eficiente, por favor hágamelo saber. Gracias.