jQuery UI "left"と "top"の代わりに "right"と "bottom"を設定する位置

Question

OK、ここに私の質問があります。 jQuery UIの位置を使用しています。要素を画面上の他の要素に関連して配置することは可能です。これは、配置されている要素にleftとtopのCSSプロパティを設定して、画面上に配置します。

左と上を設定するのではなく、代わりに右と下を設定して、配置された要素が大きくなったり収縮したりすると、正しい方向に収縮します。

詳しくは、 私が欲しいのは、要素が正しく配置されている場合、leftの代わりにright CSSプロパティを設定し、要素がその下部に配置されている場合はtopの代わりにbottomを設定したいと考えています。 jQuery UI Positionのusingプロパティを使用してこれを行うことはできますが、衝突検出に問題があります。衝突検出がflipに設定され、要素が反転した場合、これを検出して、leftの代わりにrightを、topの代わりにbottomを設定する必要があるかどうかを判断したいと思います。下のコードを調べて、私がしようとしていることのより良いアイデアを得てください。

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

これは、divが衝突検出から反転した場合を除いて、素晴らしいことです。水平方向に反転した場合は、rightの代わりにleftを設定し、垂直に反転した場合はbottomの代わりにtopを設定します。

理想的な解決策は、（using機能で）要素が反転されているかどうか、およびどの方向であるかを伝える方法があるかどうかです。だから、誰もが要素が衝突検出を使って反転されたかどうかを知るためのアイデアはありますか？

Answer 1

OK、これを理解しました。ここで私はどのように動作させるのか説明しようとしています。 あなたがしなければならないことは、using機能の中で再び位置を呼び出すことです。衝突検出なしで1回、衝突検出で1回呼び出します。位置が変わると、それは反転された。コメントのあるコードの例を以下に示します。

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

もっと効率的なアイデアがあれば、教えてください。ありがとう。