0

在这个 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');   
     });

当我右键单击时，只要米色框在身体左侧，出现的红色框就完全可见。但是如果米色框靠近身体的右边缘，红色框的一部分将不在屏幕上。

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

有人可以建议一种方法来感知红框是否会完全出现在屏幕上？

谢谢

4

2 回答 2

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

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

这是更新的小提琴

于 2013-09-09T06:33:00.933 回答
1

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

代码：

$(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/

于 2013-09-09T06:43:26.933 回答