JSFiddle - React, Tailwind, and code Playground

by Oliver_kh

HTML

<div class="as"></div>
<div class="asa"></div>
<div class="er asas">я нашел ошибку</div>
<div class="gd"></div>

CSS

.ff {
    min-width:50px;
    min-height:20px;
    width:100px;
    height:100px;
    border:2px solid red;
    background:red;
    top: 10px;
    left: 10px;
    z-index:15;
    position:absolute;
}
.gd {
    width:500px;
    height:1500px;
    border:2px solid blue;
}
.asa {
    position:fixed;
    right:0px;
}
.asas {
    position:fixed;
    right:0px;
    top:20px;
}

JavaScript

$(function () {
    $('.er').click(function () {
        var scrt = $('body').scrollTop();
        $(".asa").text(scrt);
        $('.gd').append('<div class="ff"style="top:' + scrt + 'px"></div>');
        $(".ff").resizable();
        $(".ff").draggable({
            containment: 'parent'
        });
        $(".ff").mousedown(function () {
            $('.ff').mousemove(function () {
                var p = $(".ff");
                var position = p.position();
                var hp = $('.ff').height();
                var wp = $('.ff').width();
                $(".as").text("left: " + position.left + ", top: " + position.top + "width" + wp + "height" + hp);

            });
        });
    });
    $(window).scroll(function () {

    });
});