JSFiddle - React, Tailwind, and code Playground

by shoo

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Растягивание окон при помощи сенсора.</title>
</head>
<body>

    <div class="sensor">
        <div class="resizeBar"></div>
    </div>

    <div class="box">Hi!</div>

</body>
</html>

CSS

body {
            padding: 0;
            margin: 0;
            -webkit-user-select: none;
        }

        .sensor {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            background-color: rgba(0,0,0,0.1);
        }

        .box {
            /*border: 1px solid #8a2be2;*/
            position: fixed;
            top: 50px;
            left: 50px;
            width: 300px;
            height: 300px;
            background-color: yellow;
        }

        .resizeBar {
            position: fixed;
            /*border: 3px dotted #000000;*/
            background-color: rgba(200,200,200,0.4);
            z-index: 50;
        }

JavaScript

var box = {
            minX: 100,
            minY: 100,
            maxX: 300,
            maxY: 300,
            mWidth: 200,
            mHeight: 50
        }
        var resized;
        var relement;

        function setSize (element, box) {
            element.css('left', box['minX']);
            element.css('top', box['minY']);
            element.css('width', box['maxX'] - box['minX']);
            element.css('height', box['maxY'] - box['minY']);
        }

        function startSizing(element) {
            $('.sensor').show();

            box.minX = element.position().left;
            box.minY = element.position().top;
            box.maxX = box.minX + element.width();
            box.maxY = box.minY + element.height();
            setSize(relement, box);
            resized = element;

        }

        $(document).ready(function(){

            relement = $('.resizeBar');



            $('.sensor').hide().css('width', $(window).width()).css('height', $(window).height()).click(function(event){
                $(this).hide();
                setSize(resized, box);
            }).mousemove(function(mouse){
                  console.log(box);
                  if (mouse.pageX>box.minX) {
                     if (mouse.pageX>(box.minX+box.mWidth)) {
                         box.maxX = mouse.pageX;
                     } else {
                         box.maxX = box.minX+box.mWidth;
                     }
                  }
                  if (mouse.pageY>box.minY) {
                      if (mouse.pageY>(box.minY+box.mHeight)) {
                          box.maxY = mouse.pageY;
                      } else {
                          box.maxY = box.minY+box.mHeight;
                      }
                  }

                setSize(relement, box);

            });


            $('.box').click(function(){
                startSizing($(this));
            });

        })