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);
        }

        $(document).ready(function(){

            relement = $('.resizeBar');



            $('.sensor')
              .hide()
              .css('width',$(window).width())
              .css('height',$(window).height())
              .click(function(event){
                        $(this).hide();
                        setSize($('.box'), 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));
            });

           ...