jQuery UI Posizione per impostare "right" e "bottom" anziché "left" e "top"

Question

OK, ecco la mia domanda. Utilizzo della posizione dell'interfaccia utente jQuery. È possibile posizionare un elemento in relazione a un altro elemento sullo schermo. Imposta le proprietà left e top css sull'elemento posizionato che lo posiziona sullo schermo.

Quello che voglio fare invece di impostare la sinistra e la parte superiore, è preferibile impostare a destra e in basso, in modo che se l'elemento posizionato cresce o si restringe, crescerà/si restringerà nella direzione corretta.

Lasciatemi entrare nei dettagli. Ok, quello che voglio è se un elemento è posizionato a destra, quindi voglio impostare la proprietà right css invece del left e se un elemento è posizionato sul fondo, allora voglio impostare bottom invece di top. Posso farlo usando la proprietà using della posizione dell'interfaccia utente di jQuery, ma ho problemi con il rilevamento delle collisioni. Se il rilevamento delle collisioni è impostato su flip e l'elemento viene capovolto, voglio rilevare questo e capire se è necessario impostare right anziché left e bottom anziché top. Controlla il codice qui sotto per avere un'idea migliore di ciò che sto cercando di fare.

$('#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}); 
    } 
}); 

Questo funziona benissimo, tranne quando il div viene capovolto dal rilevamento di collisione. Se viene capovolto orizzontalmente, desidero impostare left anziché right e se viene capovolto verticalmente, desidero impostare top anziché bottom.

La soluzione ideale sarebbe se ci fosse un modo per dire (nella funzione using) se l'elemento è stato capovolto e in quali direzioni. Quindi, qualcuno ha qualche idea per capire se un elemento è stato capovolto usando il rilevamento delle collisioni?

Answer 1

OK, capito ... Ecco il mio tentativo di spiegare come ho fatto funzionare. Quello che devi fare è chiamare di nuovo la posizione all'interno della funzione using. Chiamalo una volta senza rilevamento collisioni e una volta con rilevamento collisione. Se la posizione cambia, allora è stato capovolto. Ecco alcuni esempi di codice con commenti.

$('#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: ''}); 
       } 
      } 
     }); 
    } 
}); 

Se qualcuno ha un'idea più efficiente, per favore fatemelo sapere. Grazie.