JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable">draggable only downwards</div>


<div class="draggable-horizontal">draggable only side to side</div>

CSS

.draggable {
    position:absolute;
    top:0px;
    background:pink;
    height:100px;
    width:200px;
    left: 50px;
    text-align:center;
}
.draggable-horizontal {
    position:absolute;
    top:0px;
    background:blue;
    height:100px;
    width:200px;
    left: 50px;
    text-align:center;
}

JavaScript

$('.draggable').draggable({
    axis: "y"
});


$('.draggable').on('mousedown', function() {
		var x1 = x2 = $(".draggable").position().left;
		var y1 = $(".draggable").position().top;
		var y2 = ($(window).height() + $(".draggable").position().top);
		$(".draggable").draggable('option', 'containment', [x1, y1, x2, y2]);
	});