JSFiddle - React, Tailwind, and code Playground

by santosh_patnala

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<body class="orange">
    <div class="blue draggable" id="blueResiz">
        <div id="bluePos"></div>
    </div>
    <div class="red draggable" id="redDrag">
        <div id="redPos"></div>
    </div>
</body>

CSS

.resizable {
            width: 150px;
            height: 150px;
            padding: 0.5em;
        }

        .orange {
            height: 100%;
            width: 100%;
            background-color: orange;
            /*added*/
            position: absolute;
        }

        .blue {
            background-color: blue;
            width: 150px;
            height: 150px;
            padding: 0.5em;
        }

        .red {
            background-color: red;
            width: 150px;
            height: 150px;
            padding: 0.5em;
            /*added*/
            position: fixed;
        }

JavaScript

$(function () {

            var targetRed = $('.red').position();
            $("#redPos").text("left " + targetRed.left + " top" + targetRed.top)
            var targetBlue = $('.blue').position();
            $("#bluePos").text("left " + targetBlue.left + " top" + targetBlue.top)

            $('#blueResiz').resizable({
                resize: function (event, ui) {
                    targetPos = $('.red').position();
                    $("#redPos").text("left " + targetPos.left + " top" + targetPos.top)
                    var added = ui.position.top + ui.size.height;
                    $("#bluePos").text("top " + ui.position.top + " height" + ui.size.height + " total " + added)

                    //if blue
                    if (ui.position.top + ui.size.height < targetPos.top) {
                        $(this).resizable({ maxHeight: targetPos.top - 20 });
                    }
                }
            });

            $('#redDrag').draggable({
                drag: function (event, ui) {

                    targetPos = $('.red').position();

                }
            })
        })