JSFiddle - React, Tailwind, and code Playground

by JeffreyTaylor

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <div id="container">
        <div id="bar"></div>
        <div id="top"></div>  
        <div id="bottom"></div>
        <span id="stop-top">-</span> 
        <span id="stop-bottom">-</span>  
    </div>

CSS

#container { height: 500px; width: 500px; border: 5px solid black; padding: 4px;}
#bar { height: 5px; width 100%; background-color: blue; top: 75px; }
#top { background-color: #DBEAF9; height:50px; top: 0px; }
#bottom { background-color: #386A96; height:450px; overflow: auto; }

#stop-top { bottom: 450px; position:relative; height: 2px; background-color:orange;}

#stop-bottom { bottom: 50px; position:relative; height: 2px; background-color:orange;}

JavaScript

$(document).ready(function () {

    $('#bar').draggable({axis: 'y', containment : 'parent' });
    

    $('#bar').on('dragstop', function () {
    
     var h = $('#bar').css('top');
     var c = $('#container').height();
        
     h = parseInt(h,10);
        
     var x = c-h;
       
     $('#top').height(h); 
        
     $('#bottom').css({'top': 5 + h, 'height': x});
        
    });
    
    $('#bar').trigger('dragstop');
    
});