JSFiddle - React, Tailwind, and code Playground

HTML

<div class="categories_container">
    <div class="category one">One</div>
    <div class="category two">Two</div>
    <div class="category three">Three</div>
    <div class="category four">Four</div>
    <div class="category five">Five</div>
    <div class="category six">Six</div>
</div>

CSS

.categories_container {
    margin: 0px;
    padding: 0px;
    height: 324px;
    width: 100%;
    position: relative;
}
.category {
    height: 50px;
    width: 98%;
    position: absolute;
    background-color: #CCC;
    z-index: 0;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 2%;
    left: 0px;
    border: 1px solid #999;
    margin: 0px;
}
.one {
    left: 0px;
    top: 0px;
}
.two {
    top: 54px;
}
.three {
    top: 108px;
}
.four {
    top: 162px;
}
.five {
    top: 216px;
}
.six {
    top: 270px;
}

JavaScript

var $el;
var dragging = false;
var text1 = '';

$(document).ready(function(){
	
	$('.category').mousedown(function(ev) {
		$el = $(this);
		dragging = true;
		startY = ev.clientY;
		startT = $el.css('top');
		finish = startT;
		text1 = $el.html();
		$el.html('DRAGGING');
		$el.css('background-color', '#DDD');
		$el.css('z-index', '1000');
		$el.css('cursor', 'pointer');
	});
	
	$(window).mousemove(function(ev) {
		if (dragging) {
			// calculate new top
			var newTop = parseInt(startT) + (ev.clientY - startY);
			$el.css('cursor', 'pointer');
			//stay in parent
			var maxTop =  $el.parent().height()-$el.height();          
			newTop = newTop < 0 ? 0 : newTop > maxTop ? maxTop : newTop;
			$el.css('top', newTop );
		}
	}).mouseup(function() {
		dragging = false;
		$el.css('z-index', 0);
		$el.html(text1);
		$el.css('top', finish);
		$el.css('background-color', '#ccc');
	});	
	
});