JSFiddle - React, Tailwind, and code Playground

by Norbert Wilms

HTML

<div id=head></div>
<div id=wrapper>
  <div id="test"></div>
  <div id="test1"></div>
  <div id="test2"></div>
</div>
<div id=div_l></div><div id=div_w></div><div id=mouse></div>
<div id=wid></div>

CSS

#cont {
  width: 300px;
}

#head {
  height: 50px;
  weidth: 300px;
  background-color: #ff4;
}

#test {
  width: 300px;
  height: 200px;
  background-color: #333;
  position: relative;
float : left;
top: 0;
  left: 0;
}
#test1 {
  width: 10px;
  height: 200px;
  background-color: #999;
  position: relative;
  float : left;
}
#test2 {
  width: 20px;
  height: 200px;
  background-color: #1ff;
  position: relative;
  float : left;
}

#wrapper {
  width: 400px;
  height: 200px;
  background-color: #399;
  top: 0;
  left: 0;
}

JavaScript

var divx0=0;
$(document).ready(function() {
      $('#test').on('mousedown', function(e) {
        $this = $(this);
        var left0 =  e.pageX ;
        var divX0 = parseInt($('#test').css('left'));
        var divW0 = parseInt($('#test').css('width'));
        $(document).bind('mousemove', function(e) {
          var left = e.pageX - left0 + divX0;
 //         var left = e.pageX - ($this.width() / 2);
 //         var top = e.pageY - ($this.height() / 2);
          if ( left < 0 ) {
            var wid = divW0 + left;
            var t1_left = left0 + divX0 +20;
            var t1_w = 400 - 20- wid;
            $('#test').css({'left': '0px','width': wid+'px'});
            $('#test1').css({'right': '400px','width': t1_w+'px'});
          }
          $('#div_l').html('Div left: ' + $('#test').css('left') );
          $('#div_w').html('Div width: ' + $('#test').css('width') );
          $('#mouse').html('Mouse_0: '+left0+' Mouse: ' + e.pageX);
          var wid = divW0 + left;
          $('#wid').html('Wid: ' + wid);
        });
          divx0 = left;
      });
      $(window).on('mouseup', function(e) {
        $(document).unbind('mousemove');
        if ( parseInt($('#test').css('width')) > 100) {
        $('#test').css({
               'left': '0px',
               'width': '300px'
            });
        }
      });
    });