Question

在这个jsfiddle中 - http://jsfiddle.net/stevea/Fhb7X/7/ - 我有一个米色的可拖动框，当我右键单击该框时，会创建一个相同大小但位于米色框右侧20px的新红框：

 $('#box').draggable();
    $('#box').contextmenu(function(e) {
        e.preventDefault();
        var doc_offset;
        boxWidth = $('#box').width();
        debugger;
        doc_offset = $(this).offset();
        doc_offset.left = doc_offset.left +  boxWidth + 20;
        $('<div>').css({width:"150px", 
                        height:"150px",
                        'background-color':'red',
                        position : 'absolute'
                       })
                 .offset(doc_offset)
                  .appendTo('body');   
     });

当我右键单击时，只要米色方框朝向身体的左侧，出现的红色框就完全可见了。但如果米色盒子靠近身体的右边缘，红色盒子的一部分就会脱离屏幕。

我想知道在创建它之前红色框是否会在屏幕外，因为如果是，我会在米色框的左侧创建它，所以当它出现时它总是完全可见。

有人可以建议一种方法来判断红框是否完全在屏幕上？

由于

Answer 1

这应该有效：

var $window = $(window);
$('#box').draggable();
$('#box').contextmenu(function (e) {
    e.preventDefault();
    var boxWidth = $(this).width();
    var boxOffset = $(this).offset();
    boxOffset.left += boxWidth + 20;
    if (boxOffset.left + boxWidth  > $window.width()) {
        boxOffset.left -= (boxWidth + 20) * 2;
    }
    $('<div>').css({
        width: "150px",
        height: "150px",
            'background-color': 'red',
        position: 'absolute'
    })
        .offset(boxOffset)
        .appendTo('body');
});

只需检查新偏移量+框的宽度是否大于窗口大小。

这是 updated fiddle

Answer 2

您想要检查新元素是否在视口中是可见的。

代码：

$(function () {

    $('#box').draggable();
    $('#box').contextmenu(function (e) {
        e.preventDefault();
        var doc_offset;
        boxWidth = $('#box').width();
        doc_offset = $(this).offset();
        doc_offset.left = doc_offset.left + boxWidth + 20;
        var elem = $('<div>').css({
            width: "150px",
            height: "150px",
                'background-color': 'red',
            position: 'absolute'
        })
            .offset(doc_offset)
            .appendTo('body');

        alert(elementInViewport(elem[0]))
    });
});

function elementInViewport(el) {
 var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document. documentElement.clientWidth) /*or $(window).width() */
        );
}

如果函数elementInViewport在视口中完全可见，则返回true，在其他情况下为false。

从此开始，您可以根据需要移动div（任何方向）。

演示：http://jsfiddle.net/IrvinDominin/RhAR6/

确定何时在屏幕外创建元素

2 个答案: