JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<div id="container" class="draggable_container">
    <div id="draggable_0">
        <div class="exp">dadada</div>
    </div>
    <div id="draggable_1" class="draggable">
        <div class="exp">---</div>
    </div>
    <div id="draggable_2">
        <div class="exp">hehehe</div>
    </div>
</div>

CSS

html
{
    height:3000px;
}

.draggable_container
{
    height:260px;
    background-color:red;
    width:140px;
}

.draggable
{
    height:20px;
    width:130px;
    cursor:pointer;
    border:1px solid #000000;
    background-color:#ffffff;
}

#draggable_0
{
    height:120px;  
    width:130px;
    background-color:green;    
}

#draggable_2
{
    height:120px;  
    width:130px;
    background-color:blue;    
}

JavaScript

$(".draggable").draggable({
    axis: "y",
    containment: '#container',
    drag: function() {
		var position = $( "#draggable_1" ).position();
		var topPos = position.top;
		var tblHeight = 300;

		var div1H = topPos;
		var div3H = tblHeight - topPos - 60;
		
		$('#draggable_0').height(div1H);
	    $('#draggable_2').height(div3H);
	}
});