JSFiddle - React, Tailwind, and code Playground

by rvaldez

HTML

<div id="container" class="container-container-fluid">
    <div id="div1" class="item drag drop">1</div>
</div>
<div id="left"></div>
<div id="right"></div>

CSS

#container {
    position: relative;
    border: 2px solid gray;
    background-color: #f5af69;
    border: 1px solid #643506;
    height: 400px;
}
.item {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #ffef2d;
    border: 1px solid red;
    text-align: center;
    line-height: 25px;
}
#div1 {
    left: 25%;
    top: 25%;
    color:black;
    font-size: 28px;
}
#left {
    background-color: #0d4409;
    color: white;
    font-size: 25px;
}
#right {
    background-color: #0d4409;
    color: white;
    font-size: 25px;
}

.inmotion {
    background:#ef23a4;
}

JavaScript

$(function () {

    $(".drag").draggable({
        containment: '#container',
        tolerance: 'touch',        
            drag: function(){
                var winW = $(window).width();
                var Body = $('body');
                var d = $('#div1').position();
                $('#left').html('left : ' + d.left)
            $('#right').html('top : ' + d.top)
            }

    });


    function wResize() {

        var winW = $(window).width();
        var Body = $('body');
        var d = $('#div1').position();


        if (winW < '600') {

            $('#div1').css({
                top: '10%',
                left: '10%',
                position: 'absolute',
                color: 'red'
            });

            $('#left').html('left : ' + d.left)
            $('#right').html('top : ' + d.top)
        }

    }

    wResize();

    $(window).resize(function () {
        wResize();
    });

});