JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

HTML

<div id="box"></div>

CSS

#box {
    width:150px;
    height:150px;
    background-color:beige;
    border:1px solid black;
    cursor: pointer;
}

JavaScript

$(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() */
        );
}