JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="world">
    <div class="way">
        <div id="dot"></div>
    </div>
</div>

CSS

* {
        margin: 0;
        padding: 0;
    }
    #world {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color:red;
    }
    #dot {
        background-color: #0473F2;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        position: fixed;
        top: calc(50% - 25px);
        left: 150px;
    }
    .way {
        width: 225px;
        height: 100px;
        position: relative;
        top: calc(50% - 50px);
        background: #FFF;
    }
    .color {
        background-color:green!important;
    }

JavaScript

$(document).ready(function () {
        $('#dot').draggable({
            axis: "y",
            containment: "#world",
            drag: function (event, ui) {
                drag_handler($(ui.helper));
            }
        });
    });
    
    function drag_handler(elem) {
        var p = elem[0].getBoundingClientRect();
        var P = $('.way')[0].getBoundingClientRect();
        if ((P.top > p.top) || (P.bottom < p.bottom)) {
            console.log('touched');
            $('#world').addClass('color')
        } else {
            $('#world').removeClass('color')
        }
    }