jQuery UI Position设置"right"和"bottom"而不是"left"和"top"

Question

好的,这是我的问题.使用jQuery UI位置.可以将元素相对于屏幕上的另一元素定位.它在要定位的元素上设置左侧和顶部css属性,将其定位在屏幕上.

我想要做的不是设置左侧和顶部,而是想要设置右侧和底部,以便如果定位元素增大或缩小,它将以正确的方向增长/缩小.

让我详细介绍一下.好吧,我想要的是如果一个元素位于它的右边,那么我想设置rightcss属性而不是left如果一个元素位于它的底部,那么我想设置bottom而不是top.我可以使用usingjQuery UI Position 的属性来做到这一点,但我遇到了碰撞检测的问题.如果碰撞检测设置为flip和元素被翻转,我要进行检测,并找出我是否需要进行设置right,而不是left和bottom代替top.查看下面的代码,以更好地了解我正在尝试做什么.

$('#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从碰撞检测中被翻转.如果它被水平翻转,我想设置left而不是right如果它被垂直翻转我想设置top而不是bottom.

理想的解决方案是,如果有一种方法可以告诉(在using函数中)元素是否被翻转以及在什么方向上.那么,任何人都有任何想法来弄清楚是否使用碰撞检测翻转了一个元素？

Answer 1

好的，想通了......这是我尝试解释我如何使其工作的。您要做的就是在using函数内再次调用position。在没有碰撞检测的情况下调用一次，在有碰撞检测的情况下调用一次。如果位置发生变化，那么它就被翻转了。这是一些带有注释的示例代码。

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

如果有人有更有效的想法，请告诉我。谢谢。