JSFiddle - React, Tailwind, and code Playground

by jackbrown

HTML

<div id="cont">
        <div id="test">
    
        </div>
        <div id="test2">
        
        </div>
        <div id="drag">
        
        </div>
    </div>

CSS

#cont{
            width: 200px;
            height:200px;
            margin:0 auto;
            border: 1px solid #f00;
            position: relative;
        }
        
        #test{
            position: absolute;
            height:200px;
            width: 200px;
            background-color: blue;
        }
        
        #test2{
            position: absolute;
            height: 100%;
            background-color: pink;
        }
        
        .dragControl{
            position: absolute;
            width:10px;
            height: 100%;
            background-color: green;
        }

JavaScript

$( function() {
    
    $( '#drag' ).each( function() {
        
        var $drag = $( this );
        
        
        $drag.parent().css( {
            'margin-left'      : $drag.parent().offset().left + 'px'
        } );
        
        $drag.on( 'mousedown', function( ev ) {
            var $this = $( this );
            var $parent = $this.parent();
            var poffs = $parent.position();
            var pwidth = $parent.width();
            
            var x = ev.pageX;
            var y = ev.pageY;
            
            $this.parent();
                
            $( document ).on( 'mousemove.dragging', function( ev ) {
                var mx = ev.pageX;
                var my = ev.pageY;
                
                var rx = mx - x;
                var ry = my - y;
                
                $parent.css( {
                    'left'       : (poffs.left + rx) + 'px',
                    'width'      : (pwidth - rx) + 'px'
                } );
               
                
            } ).on( 'mouseup.dragging mouseleave.dragging', function( ev) {
                $( document ).off( '.dragging' );
            } );
            
            
        } );
        
    } );
    
} );